CODEWITHSUNDEEP
androidreactjsreact-nativenative
Jyot
Jyot

Reputation: 540

Unable to edit TextInput data in react native

I am new to react native. I am trying to update data n TextInput field but it doesn't allow me to edit it. Here is the code I am using. 

  <TextInput style = {styles.textInputStyle}
                            underlineColorAndroid = "transparent"
                            placeholder = "Student First Name"
                            placeholderTextColor = "gray"
                            autoCapitalize = "none"
                            onChangeText = {this.handleFirstName}
                            value={this.props.navigation.state.params.firstName}
                          />   



  handleFirstName = (text) => {
      this.setState({ firstName: text })
   }

This same code is working in IOS device where as it doesn't allow to edit value in Android.

If you need any further details let me know. Thanks in advance.

Upvotes: 2

Views: 3026

Answers (1)

Hariharan L
Hariharan L

Reputation: 1411

You have to set the initial value (that you get from props) to the state in the constructor and then refer the state in value

<TextInput style = {styles.textInputStyle}
   underlineColorAndroid = "transparent"
   placeholder = "Student First Name"
   placeholderTextColor = "gray"
   autoCapitalize = "none"
   onChangeText = {this.handleFirstName}
   value={this.state.firstName}
 />

and in the constructor as below

constructor(props){
  ....
  this.state = { firstName: props.navigation.state.params.firstName }
  ....
}

It's mentioned in this link

Upvotes: 2

Related Questions