Redux-form, Invalid prop 'value' of type 'number' supplied to 'TextInput', expected 'string'

Praveen

I am using a custom component in a redux-form field as follows.

<Field name="height" parse={value => Number(value)} component={NumberInput} />

The custom component uses React Native's TextInput component and it looks like this:

import React from 'react';
import PropTypes from 'prop-types';
import { View, Text, TextInput, StyleSheet } from 'react-native';
import { COLOR_PRIMARY } from '../constants';

const styles = StyleSheet.create({
  inputStyle: {
    height: 30,
    width: 50,
    marginBottom: 10,
    borderColor: COLOR_PRIMARY,
    borderWidth: 2,
    textAlign: 'center',
  },
  errorStyle: {
    color: COLOR_PRIMARY,
  },
});

const NumberInput = (props) => {
  const { input: { value, onChange }, meta: { touched, error } } = props;
  return (
    <View>
      <TextInput
        keyboardType="numeric"
        returnKeyType="go"
        maxLength={3}
        style={styles.inputStyle}
        value={value}
        onChangeText={onChange}
      />
      {touched &&
        (error && (
          <View>
            <Text style={styles.errorStyle}>{error}</Text>
          </View>
        ))}
    </View>
  );
};

NumberInput.propTypes = {
  meta: PropTypes.shape({
    touched: PropTypes.bool.isRequired,
    error: PropTypes.string,
  }).isRequired,
  input: PropTypes.shape({
    // value: PropTypes.any.isRequired,
    onChange: PropTypes.func.isRequired,
  }).isRequired,
};

export default NumberInput;

I want to store the the value entered for the height field as a Number and not a String type. Hence I am using parse to convert String to a Number as you can see in the Field.

I am able to do this but keep getting the Yellow Box warning of:

 Invalid prop 'value' of type 'number' supplied to 'TextInput', expected 'string'

Have tried setting the value PropType to any, string, number, or oneOfType string or number, nothing seems to work. Have also tried setting type="number" in the Field and TextInput, as well as type="text".

Any help appreciated...

Kapil Yadav

Basically, in your props you are passing numerical value of value.You have to passed it in the form of string.You can edit your code like this:

<TextInput
  keyboardType="numeric"
  returnKeyType="go"
  maxLength={3}
  style={styles.inputStyle}
  value={`${value}`} //here
  onChangeText={onChange}
/>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Warning: Failed prop type: Invalid prop `value` of type `number` supplied to `TextInput`, expected `string`

invalid prop value of type number supplied to textinput expected string react native

Failed prop type: Invalid prop 'value' of type 'object' supplied to 'TextInput' React Native

[Vue warn]: Invalid prop: type check failed for prop "page". Expected Number with value 0, got String with value ""

Failed prop type: Invalid prop `match.params` of type `object` supplied to `Page`, expected `string`

Warning: Failed prop type: Invalid prop `defaultValue` of type `string` supplied to `AutoCompleteSearch`, expected `function`

Failed prop type: Invalid prop `children` of type `string` supplied to `DetailField`, expected `object`

GraphQL: Warning: Failed prop type: Invalid prop `query` of type `object` supplied to `StaticQuery`, expected `string`

Failed prop type: Invalid prop `responsive` of type `string` supplied to `Image`, expected `boolean`

Warning: Failed prop type: Invalid prop `items[0]` of type `string` supplied to `ImageGallery`, expected `object`

Failed prop type: Invalid prop `answer` of type `string` supplied to `AnswerItem`, expected `object`

GETTING ERROR : Warning: Failed prop type: Invalid prop `children` supplied to `Form`, expected a ReactNode

Invalid prop type supplied

Invalid prop `verseObj.version_id` of type `string` supplied to `VerseForm`, expected `object`

Invalid prop type from router params, expected Number got String

Invalid prop `component` of type `object` supplied to `Route`, expected `function`

redux form Element type is invalid: expected a string (for built-in components)

Warning: Failed prop type: Invalid prop `data` of type `object` supplied to `Carousel`, expected `array`

Failed prop type: Invalid prop `onClick` of type `object` supplied to `ButtonBase`, expected `function`

Failed prop type: Invalid prop of type `function` supplied expected a single ReactElement

Failed prop type: Invalid prop `onClick` of type `object` supplied to `Button`, expected `function`

Why do I get Failed prop type: Invalid prop `onAnimationFinish` of type `object` supplied to `LottieView`, expected a `funtion`

Failed prop type: Invalid prop `component` of type `object` supplied to `Route`, expected `function`

Warning: Failed prop type: Invalid prop `open` of type `function` supplied to `ForwardRef(Dialog)`, expected `boolean`. at Dialog

Invalid prop: type check failed for prop "value". Expected Boolean, got String with value "0"

Vuejs error, Invalid prop: type check failed for prop. Expected Date, got Number with value

Failed prop type: Invalid prop `to` supplied to `Redirect`

Failed prop type: Invalid prop `app` supplied to `Body`, expected a single ReactElement

Failed prop type: Invalid prop `children` supplied to `ForwardRef(Select)`, expected a ReactNode