CODEWITHSUNDEEP
javascriptreact-nativetextinput
Mary Jane
Mary Jane

Reputation: 173

TextInput with value doesn't change value

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 })}/>

Upvotes: 9

Views: 17650

Answers (7)

Sahil bakoru
Sahil bakoru

Reputation: 692

If above answere didn't work!

try it like this

When you change the value prop to defaultValue you have to make it a string,

defaultValue does not take number

You can use toString() method to convert it into string.

like shown below

<TextInput
   style={styles.inputBox}
   onChangeText={title => setState(title )}
   defaultValue={title.toString()}
   placeholder='Title'
/>

more info about this on React's documentation here

Upvotes: 2

Mahendren Mahisha
Mahendren Mahisha

Reputation: 1062

I am also having the same issue until I changed the value prop to defaultValue like this:

<TextInput
   style={styles.inputBoxSize}
   onChangeText={title => this.setState({ title })}
   defaultValue={this.state.title}
   placeholder='Title'
/>

value={this.state.title} - instead of this

defaultValue={this.state.title} - use this one

Thats all. Enjoy your coding...

Upvotes: 2

Waseem Sajjadh
Waseem Sajjadh

Reputation: 23

I don't know whether it is a good approach or not but Dustin Spengler answer worked for me without any problem. I don't have enough reputation to upvote and to comment.

<TextInput
style={styles.inputBox}
onChangeText={title => this.setState({ title })}
defaultValue={this.state.title}
placeholder='Title'
/>

Upvotes: 0

Milore
Milore

Reputation: 1672

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

Upvotes: 6

Dustin Spengler
Dustin Spengler

Reputation: 7771

I was having the same issue until I changed the value prop to defaultValue like this:

<TextInput
   style={styles.inputBox}
   onChangeText={title => this.setState({ title })}
   defaultValue={this.state.title}
   placeholder='Title'
/>

I found this info on React's documentation here

Upvotes: 11

Mikhail Sidorov
Mikhail Sidorov

Reputation: 1434

I think you have an error in your handler function. When you called setState you updated the this.state.email but in your text input value you used this.state.info.email, you also wrote the event object to the email, instead of the new value of the field (event.target.value). You should use something like this.

onChangeHandler = event => {
  const newEmail = event.target.value
  this.setState({ info: {email: newEmail})}
}

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

Upvotes: 0

Pradnya Choudhari
Pradnya Choudhari

Reputation: 394

first you need to declare the state and then apply that state to TextInput Value.

state: {
     email: ''
}

and to populate TextInput for first time with the API value you have to add 

componentDidMount(){
  this.setState({email: this.props.info.email});
}

and your TextInput will be like below:

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

Hope this works..

Upvotes: 2

Related Questions