TextInput value is not updated after changing state?

Question

        <TextInput
            label={'Please enter your email'}
            onChangeText={text => this.onChangeText(text)}
            style={textInputStyle}
            value={this.state.testEmail}
        />

Check the function which I'm using to handle the text, where I'm appending some dummy text but it's not getting reflected.

onChangeText = (text, id) => {
    this.setState((previousState) => ({
                testEmail:
                text+'test'
            }
        )
    )
}

Here's the constructor,

constructor(props) {
    super(props);
    this.state = {
        testEmail: '',
    };
}

score 1 · Answer 1 · answered Mar 26 '20 at 16:11

1

Try this:

<TextInput
  label={'Please enter your email'}
  onChangeText={this.onChangeText}
  style={textInputStyle}
  value={this.state.testEmail}
/>

onChangeText = text => {
  this.setState({
    testEmail: `${text}test`
  });
}

Sample snack here.

answered Mar 26 '20 at 16:11

Dan

8,041
8
41
72

I tried your expo project, it's working fine. But I had copied the exact same code and it's not working in my project. The issue is text gets replaced back to an empty string. – Manoj Perumarath Mar 26 '20 at 16:24

score 0 · Accepted Answer · answered Mar 26 '20 at 16:37

0

shouldComponentUpdate This method was calling anonymously which was resulting not to update the TextInput

answered Mar 26 '20 at 16:37

Manoj Perumarath

9,337
8
56
77

TextInput value is not updated after changing state?

2 Answers2