Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

I have the following TextInput Component:

<TextInput value={this.state.inputText}
  maxLength={1}
  onSubmitEditing={this.textHandler}
  onChangeText={(text) => this.setState({inputText: text})} />

When I change the input to '' and submit it (in the TextInput) I have the following error: "Failed prop type: Invalid prop 'value' of type 'object' supplied to 'TextInput'"

I tried deleting each callback and apparently, the error is throwed because of the 'onSubmitEditing'.

textHandler = (text) => {

  if(text == '' || text == '-' ){
    text = '0';
  }

  this.setState({inputText: text});
}

How can I make the callback to be called only where text is a string and not an object?

like image 424
Michael Avatar asked Jul 18 '17 08:07

Michael


People also ask

Is there an invalid prop in React Native textinput?

React Native: Invalid prop `value` of type `number` supplied to `TextInput`, expected `string`. Fantashit February 19, 2021 4 Comments on React Native: Invalid prop `value` of type `number` supplied to `TextInput`, expected `string`.

What is an invalid prop type error in textinput?

Warning: Failed Prop type: Invalid prop ‘value’ of type ‘number’ supplied to ‘TextInput’, expected ‘string’ If you will see the code of the TextInput you will find we directly pass the value from the state/variable to the value prop. But the prop value requires the value to be set in the string.

How to pass values from state/variable to prop in textinput?

If you will see the code of the TextInput you will find we directly pass the value from the state/variable to the value prop. But the prop value requires the value to be set in the string. Sometimes values in the state will be numeric and sometimes it will be alphanumeric.

Is prop value a string or a string?

But the prop value requires the value to be set in the string. Sometimes values in the state will be numeric and sometimes it will be alphanumeric. In this case when the value is alphanumeric then the value is treated as a string but in the case of numeric, it becomes pure numbers.


Video Answer


1 Answers

change your onSubmitEditing to

onSubmitEditing={(event) => this.textHandler( event.nativeEvent.text )}

Its a function, and you haven't passed value to it. If you want to pass you can get it from event

But you have used onChangeText which will update inputText so you just need to check value exists or not.

like image 158
Jigar Shah Avatar answered Sep 17 '22 14:09

Jigar Shah