Set state and then reading the state shows the previous value

Question

I have the following code that maintains the value when the textbox value is changed. However, whilst debugging the valueHasChangedEvent the variable x line shown below holds the previous value strangely. Is there something I'm doing wrong? The example shown is when I enter 'test123' into the textbox.

Thanks

onChange event

<Input onChange={this.valueHasChangedEvent}
   type="text" 
   name="test" 
   id="test" />

Method

valueHasChangedEvent = (event) => {
    var self = this;
    const { name, value } = event.target;
    self.setState({test: value});  // value = 'test123'

    var x = self.state.test;  // x = 'test12'
}

It’s definitely that duplicate @MoshFeu – Nate May 02 '19 at 23:10 — Nate, May 02 '19 at 23:10

score 1 · Accepted Answer · answered May 02 '19 at 23:09

1

State needs some time to change, and since you are reading the state value before the state mutates, you get the previous value as output. So you need to write it in the callback to the setState function or read it in shouldComponentUpdate()

var x;
self.setState({test: value}, (x) => {
  x = self.state.test
});

answered May 02 '19 at 23:09

vjeta

1,178
2
11
18

Please refer the OP to an existing answer instead of answering again.. Thanks – Mosh Feu May 02 '19 at 23:12

Set state and then reading the state shows the previous value

1 Answers1