Failed prop type invalid prop 'value'

Question

I introduced a Texinput for Search in react-native. Here are the codes:

      constructor(props){
        super(props);
        this.state = {
          value : "",
          items: [],
        }

        this.handleHeaderSearch = this.handleHeaderSearch.bind(this);
        this.handleSearchBtn = this.handleSearchBtn.bind(this);
      }
      handleSearchBtn(){

      }
      handleHeaderSearch(){
        if(!this.state.value) return;

  }

and:

<TextInput
  value={this.props.value}
  onChange = {this.props.onChange}
  placeholder={"جستجو"}
  blurOnSubmit={false}
  style={{flex:0.9}}
  returnKeyType="done"
/>

Whenever I run Android after typing in the text input, I see this warning:

"Warning Failed prop type invalid prop 'value' of type 'object' supplied to TextInput, expected 'string'"

Answer 1

You're storing the value in this.state.value (or at least that appears to be your intent) but you're passing this.props.value to your TextInput.

If you do intend to pass in this.props.value to the TextInput, it would help to know what is getting passed into this component (one level up).

Answer 2

In some scenarios the error you mentioned or Warning: Failed prop type: Invalid prop value of type number supplied to TextInput, expected string appears when you try to input value of type number instead of string. The best practice for react-native is to wrap the input value with String() function like this:

<TextInput
  value={String(this.props.value)}
  onChange = {this.props.onChange}
  placeholder={"جستجو"}
  blurOnSubmit={false}
  style={{flex:0.9}}
  returnKeyType="done"
/>

This is how you can solve Warning: Failed Prop type: Invalid prop ‘value’ of type ‘number’ supplied to ‘TextInput’, expected ‘string’.

Answer 3

I'm getting the same error while typing in input and if someone use functional component like this, By setting up useState('') to empty string worked for me (in case useState is set to null or undefined) .

Converting value={String(text)} not work for me and it shows [object, object] in input placeholder when i trying to convert value of the text to String.

const HomeContainer = () => {
  const [text, onChangeText] = useState(''); // Just set useState() to empty string ('')
    
        return (
          <>
          <SafeAreaView>
            <ScrollView styles={styles.scrollView}>
            <Text style={styles.welcome}>Verify Faces</Text>
            <Text></Text>
            <View
            style={[
              styles.container,
              {backgroundColor: COLORS.primaryLight}
            ]}>
                <TextInput style={styles.input} value={text} onChange={onChangeText} placeholder='Enter your name' placeholderTextColor = "#000"/>
                <TextInput style={styles.input} value={text} type='email' onChange={onChangeText} placeholder='Enter your email' placeholderTextColor = "#000"/>
              </View>
              <SimpleImagePicker />
            </ScrollView>
          </SafeAreaView>
          </>
        );
}