React-native: Can not change value of <TextInput /> with state

[coderdave]

Using react-native 0.17.0, can't change the value of a <TextInput /> with state.

There's nothing fancy going on, just the basics...

var inputExample = React.createClass({
  getInitialState() {
    return {
      textInputValue: "default",
    };
  },

  handleChangeText(text) {
    let newTextInputValue = "***" + text;
    this.setState({
      textInputValue: newTextInputValue
    });
  },

  render() {
    console.log("this.state.textInputValue", this.state.textInputValue);
    return (
          <View>
            <TextInput onChangeText={this.handleChangeText}
              value={this.state.textInputValue}  />
          </View>
    );
  },
});

As you change the value, the console.log in the render will show the "*" before the value, but the <TextInput /> will not do the same.

This issue might be related, but it was closed for some reason: https://github.com/facebook/react-native/issues/4290

And this issue might also be related: https://github.com/facebook/react-native/issues/4307

[facebook-github-bot]

Hey coderdave, thanks for reporting this issue!

React Native, as you've probably heard, is getting really popular and truth is we're getting a bit overwhelmed by the activity surrounding it. There are just too many issues for us to manage properly.

• If you don't know how to do something or something is not working as you expect but not sure it's a bug, please ask on StackOverflow with the tag react-native or for more real time interactions, ask on Discord in the #react-native channel.
• If this is a feature request or a bug that you would like to be fixed, please report it on Product Pains. It has a ranking feature that lets us focus on the most important issues the community is experiencing.
• We welcome clear issues and PRs that are ready for in-depth discussion. Please provide screenshots where appropriate and always mention the version of React Native you're using. Thank you for your contributions!

[sjmueller]

Happening for me as well on v0.17.0. Wrapping the setState call in setImmediate somewhat achieves the desired results, but there are side effects like cursor out-of-position and flashing that I believe would not be a problem when avoiding setImmediate.

[fabianeichinger]

This is fixed in v0.18-rc by commit c8108bdbe13590660d7f575d0747e100ea7bb866 (see also #5128).

[jsntghf]

It is not working for me on v0.21.0, what happend?

[mak2014]

I am having same issue using react-native version: 0.21.0

Can someone please point me in right direction.

Please see the code below:

export default class NoteScreen extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      note: this.props.note
    };
  }

  render(){
    return (
      <View style={styles.container}>
        <TextInput
          autoFocus={true}
          autoCapitalize="sentences"
          placeholder="Untitled"
          autoCorrect={false}
          style={[styles.textInput, styles.title]}
          onEndEditing={(text) => {this.refs.body.focus()}}
          underlineColorAndroid="transparent"
          value={this.state.note.title}
          onChangeText = {(title) => {this.setState({title})}} />
      </View>
    );
  }
}

[cupofjoakim]

I'm also having this issue on 0.21.0. Has anyone reported it to productpains yet?

[mak2014]

@cupofjoakim Yes, I did.

[zulfikar313]

Try this in the onChangeText part, it works for me :

onChangeText={(body) => {this.setState({note:{
title:this.state.note.title,
id:this.state.note.id,
body:body
}})}}

[saintc0d3r]

Hello @coderdave,

@zulfikar313 seems able to get a workaround for handling this issue. Could you confirm and close this issue ?

Thanks.

[grabbou]

This has been originally fixed in https://github.com/facebook/react-native/commit/c8108bdbe13590660d7f575d0747e100ea7bb866 as noted above. I copied the OP example to master and everything worked well.

Regarding other reports here -> there were small bugs in the way you have been passing value (so that TextInput was receiving an undefined value). In case you are still getting these problems, please don't hesitate to open up StackOverflow question where most of the community is ready to help!

[JonasJonny]

toString() helps with number input

value={this.state.YOUR_NAME.toString()}

[Rutulpatel7077]

I have same issue!

+1

[Rutulpatel7077]

var inputExample = React.createClass({
  getInitialState() {
    return {
      textInputValue: "default",
    };
  },

  handleChangeText(text) {
    let newTextInputValue = "***" + text;
    this.setState({
      textInputValue: newTextInputValue
    });
  },

  render() {
    console.log("this.state.textInputValue", this.state.textInputValue);
    return (
          <View>
            <TextInput onChangeText={this.handleChangeText}
              value={this.state.textInputValue}  />
          </View>
    );
  },
});

The solution is convert your state value in string

like this

var inputExample = React.createClass({
  getInitialState() {
    return {
      textInputValue: "default",
    };
  },

  handleChangeText(text) {
    let newTextInputValue = "***" + text;
    this.setState({
      textInputValue: String(newTextInputValue)
    });
  },

  render() {
    console.log("this.state.textInputValue", this.state.textInputValue);
    return (
          <View>
            <TextInput onChangeText={this.handleChangeText}
              value={this.state.textInputValue}  />
          </View>
    );
  },
});