The value in TextInput is not getting changed?

Question

I am a newcomer to react native and struggling with the following issue. I am doing an update function, once a user is selected then this user's data is populated into their dedicated fields TextInput like given_name, family_name and so on. The problem is when I try to modify the populated data from any TextInput it won't allow me as the text will not change at all and remain fixed as what it is no matter what. I am aware this is happening because the value of my fields are assigned to the incoming data that I want to update but how do I fix that and be able to modify this value ?

I would appreciate if you can help.

constructor(props) {
  super(props);
  this.state = {
    given_name: '',
    family_name: '',
    email: '',
    password: '',
    UserInfo: '',
  };
}

handleGivenName = (text) => {
  this.setState({
    given_name: text
  })
}
handleLastName = (text) => {
  this.setState({
    family_name: text
  })
}
handleEmail = (text) => {
  this.setState({
    email: text
  })
}
handlePass = (text) => {
  this.setState({
    password: text
  })
}

<TextInput placeholder="Last Name"
           onChangeText={ this.handleLastName }
           value={ this.state.UserInfo.family_name } />

<TextInput placeholder="Last Name" onChangeText={this.handleLastName} value = {this.state.UserInfo.family_name} /> — Khaled
– Khaled, Commented Mar 13, 2020 at 16:34
@Khaled I think palaѕн wanted to know what the component definition of TextInput looks like? — Mr. Polywhirl
– Mr. Polywhirl, Commented Mar 13, 2020 at 16:36
@Khaled It's where the TextInput component is defined. Not your custom instance. See: TextInput.js — Mr. Polywhirl
– Mr. Polywhirl, Commented Mar 13, 2020 at 16:48

Tim · Accepted Answer · 2020-03-13 16:42:01Z

1

Try to use an arrow-function in onChangeText:

handleLastName(text) {
  this.setState({
    family_name: text,
    userInfo: { ...this.state.userInfo, family_name: text}
  })
}

render():

<TextInput   
placeholder="Last Name" 
onChangeText={(text) => this.handleLastName(text)} 
value={this.state.family_name} // remove UserInfo
/>

edited Mar 13, 2020 at 16:42

answered Mar 13, 2020 at 16:36

Tim

10.7k4 gold badges39 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Khaled Over a year ago

The populated data is stored in UserInfo, if I removed it the textinput would be empty @Tim

Mechanic · Accepted Answer · 2020-03-13 16:45:26Z

0

you are reading value from a property this.state.UserInfo.family_name and update another one in change handler this.setState({ family_name: text }) that makes your value read-only; either update change handler or the value you are passing to the TextInput; your code is similar to this :

state = {
 a: 1,
 b: 2
}

changeHandler(e){
setState( { b: e.value } )

render(){
 <TextInput value={b} />
   ....

answered Mar 13, 2020 at 16:45

Mechanic

5,4484 gold badges19 silver badges44 bronze badges

Collectives™ on Stack Overflow

The value in TextInput is not getting changed?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related