title: reactjs onChange not picking up last character
body: <p>I can not figure out why my onChange event listener is not accepting the last character in my form. (See image and console.log) <a href="https://i.stack.imgur.com/UAeXc.png" rel="nofollow noreferrer">onChange Issue</a></p>
  
  <p>I have read the article on the react website on forms <a href="https://reactjs.org/docs/forms.html" rel="nofollow noreferrer">https://reactjs.org/docs/forms.html</a>
  and I have also looked at the post <a href="https://stackoverflow.com/questions/33088482/onchange-in-react-doesnt-capture-the-last-character-of-text">onChange in React doesn&#39;t capture the last character of text</a></p>
  
  <p>but still can not seem to find the answer.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.css';
  
  
  
  /*stop clicking ability after clicking a problem (prevent default) and enable it when submit is done.*/
  
  /*  let btnStyle = {
          backgroundColor: 'green'
      } */
  
  /*we also changed onClick={() =&gt; props.onClick()} to just onClick={props.onClick},
   as passing the function down is enough for our example. Note that onClick={props.onClick()}
   would not work because it would call props.onClick immediately instead of passing it down.*/
  
  class  Square extends React.Component
  {
      render()
      {
          return (
                   &lt;button className="square" onClick = {this.props.onClick} style = {{backgroundColor: this.props.backgroundColor}}&gt;
                      {this.props.value}
                      {this.props.txt}
                  &lt;/button&gt;
              );
      }
  
  }
  
  class Board extends React.Component
  {
      constructor(props)
      {
      super(props);
      this.state =
      {
        squares: Array(25).fill(null),
        xIsNext: true,
        squaresColor: Array(25).fill('null'),
        num1: generateRandomNumber(),
        num2: generateRandomNumber(),
        ans:  function(a,b){return(a * b);},
        sqTxt: Array(25).fill(null)
      };
  
      //this.handleAnswer = this.handleAnswer.bind(this);
  
    }
  
    handleClick(i)
    {
      const squares = this.state.squares.slice();           // makes a mutable copy of the array
      const squaresColor = this.state.squaresColor.slice(); // makes a mutable copy of the array
      const sqTxt = this.state.sqTxt.slice(); // makes a mutable copy of the array
      if (/* calculateWinner(squares) || */ squares[i])
      {
        return;
      }
  
      squaresColor[i] = 'blue';
      sqTxt[i] =  &lt;input onChange = {(e,i) =&gt; this.handleAnswer(e, i)} className = 'answer-input' type = 'text' name = 'answer' /&gt;;
  
  
      this.setState({
                      squares:      squares,
                      xIsNext:      !this.state.xIsNext,
                      squaresColor: squaresColor,
                      /* num1:          generateRandomNumber(),
                      num2:         generateRandomNumber(), */
                      sqTxt:        sqTxt
                    });
  
      squares[i] = this.state.num1 + ' X ' + this.state.num2;
    }
  
  
    /*When an event is invoked, it will be passed an event object as it's first argument. You can name evt whatever you like. Common names are e evt and event.*/
    handleAnswer(e, i)
    {
        const userAnswer = parseInt(e.target.value, 10);
        const num1 = this.state.num1;
        const num2 = this.state.num2;
        const correctAnswer = num1 *  num2;
        const squaresColor = this.state.squaresColor.slice();           // makes a mutable copy of the array      
  
          console.log('num1: ' + num1);
          console.log('num2: ' + num2);
          console.log('userAnswer: ' + userAnswer);
          console.log('correctAnswer: ' + correctAnswer)
  
          squaresColor[i] = 'purple';
  
  
      this.setState({
                      squaresColor: squaresColor
                    })
  
  
        if(userAnswer === correctAnswer)
        {
            this.setState({squaresColor: squaresColor});
            console.log('correct');
            squaresColor[i] = 'green';
        }
  
        else
        {
            console.log('incorrect');
        }
  
        //create new numbers for next problem
        this.setState({num1: generateRandomNumber(), num2: generateRandomNumber()});
    }
  
  
  
    renderSquare(i)
    {
      return (
        &lt;Square
          value={this.state.squares[i]}
          onClick = {() =&gt; this.handleClick(i)}
          backgroundColor = {this.state.squaresColor[i]}
          txt = {this.state.sqTxt[i]}
        /&gt;
      );
    }
  
    render()
    { 
      return (
        &lt;div className = 'all-rows'&gt;
          &lt;div className="board-row"&gt;
            {this.renderSquare(0)}
            {this.renderSquare(1)}
            {this.renderSquare(2)}
            {this.renderSquare(3)}
            {this.renderSquare(4)}
          &lt;/div&gt;
          &lt;div className="board-row"&gt;
            {this.renderSquare(5)}
            {this.renderSquare(6)}
            {this.renderSquare(7)}
            {this.renderSquare(8)}
            {this.renderSquare(9)}
          &lt;/div&gt;
          &lt;div className="board-row"&gt;
            {this.renderSquare(10)}
            {this.renderSquare(11)}
            {this.renderSquare(12)}
            {this.renderSquare(13)}
            {this.renderSquare(14)}
          &lt;/div&gt;
          &lt;div className="board-row"&gt;
            {this.renderSquare(15)}
            {this.renderSquare(16)}
            {this.renderSquare(17)}
            {this.renderSquare(18)}
            {this.renderSquare(19)}
          &lt;/div&gt;
          &lt;div className="board-row"&gt;
            {this.renderSquare(20)}
            {this.renderSquare(21)}
            {this.renderSquare(22)}
            {this.renderSquare(23)}
            {this.renderSquare(24)}
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  
  class Game extends React.Component
  {
    render() {
      return (
        &lt;div className="game"&gt;
          &lt;div className="gxame-board"&gt;
            &lt;Board /&gt;
          &lt;/div&gt;
          &lt;div className="game-info"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  
  ReactDOM.render(
    &lt;Game /&gt;,
    document.getElementById('root')
  );
  
  
  function generateRandomNumber()
  {
      return Math.floor(Math.random() * 10);
  }
  </code></pre>