Set state and then reading the state shows the previous value : <p>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. </p>

<p>Thanks</p>

<p><strong>onChange event</strong></p>

<pre><code>&lt;Input onChange={this.valueHasChangedEvent}
   type="text" 
   name="test" 
   id="test" /&gt;
</code></pre>

<p><strong>Method</strong></p>

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

    var x = self.state.test;  // x = 'test12'
}
</code></pre>
