TextInput with value doesn't change value

javascript react-native textinput
Mary Jane picture Mary Jane · Jan 9, 2019 · Viewed 8.1k times · Source

In my react-native app i have an API that I'm retrieving data from, and I'm setting the data inside my input values, user should be able to edit those inputs and update, but when i try to type in the input it won't type anything and the value stays as it is, here is the TextInput code:

<TextInput
   placeholder= Email
   value={this.state.info.email}
   onChangeText={email => this.setState({ email })}/>

Answer

Milore picture Milore · Jan 9, 2019

Since I don't think email is the only prop of your state.info I recommend you to use setState() properly, in order to modify just that field. According to immutability and ES6, something like:

<TextInput
  placeholder="Email"
  value={this.state.info.email}
  onChangeText={text =>
    this.setState(state => ({
      info: {
        ...state.info,
        email: text
    }))
  }
/>;

Read more about handling TextInput here

Related questions

Disable Options on React-Native Text Input

I am using TextInput for a project and wanted to DISABLE any kind of text selection or actions like (cut/copy/paste/share) as shared in the screenshot below. I am not able find anything in the react-native official documentation

Read More
How to autofocus next TextInput on react-native

I'm trying to create a passcode protected screen. The screen will uses 4 numeric input as the passcode. The way I'm doing this is create a TextInput Component and call it 4 times in my main screen. The problem I'm having is …

Read More
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 …

Read More