onChange event updates state with 1 character delay
<p>I have my input component set up in the following way</p>

<pre><code>  constructor(props) {
    super(props)
    this.state = {text: ''}
  }

  componentWillReceiveProps(props) {
    if(props.value) {
      this.setState({text: props.value});
    }
  }

  handleChange(event) {
    event.persist();
    this.setState({text: event.target.value});
    if(typeof(this.props.onChange) === 'function') {
      this.props.onChange(event);
    }
  }

  render() {
    return (
      &lt;input
        onChange={ this.handleChange.bind(this) }
        value={ this.state.text }
        type="text"
        placeholder={ this.props.placeholder }
        className={ `form-text-input ${this.props.helpers}` }/&gt;
    );
  }
</code></pre>

<p>And I use it inside other components through <code>TextInput</code> (its classname), so:</p>

<pre><code>    //Handle change
    handleChange(event) {
      this.setState({text: event.target.value})
      console.log(this.state.text);
    }

    &lt;TextInput
      helpers="transparent seperator-text"
      value={this.state.text}
      onChange={this.handleChange.bind(this)} /&gt;
</code></pre>

<p>Now the issue is that when I type say "Hello, World" my console output will only say "Hello, Worl" and is missing that one last character every time I type something. I'm submitting this text on change, and it submits incomplete string this is really annoying.</p>

<hr>

<p>Note nothing changes if I simply replace <code>TextInput</code> with standard input</p>