title: ReactJS onClick state change one step behind
body: <p>I'm building a very primitive quiz app with ReactJS and I'm having trouble updating the state of my <code>Questions</code> component. Its behavior is it renders the correct index of the <code>questions</code> array to the DOM  despite <code>this.state.questionNumber</code> always being one step behind in <code>handleContinue()</code>:</p>
  
  <pre><code>import React from "react"
  
  export default class Questions extends React.Component {
    constructor() {
      super()
      this.state = {
        questionNumber: 1
      }
    }
  
    //when Continue button is clicked
    handleContinue() {
      if (this.state.questionNumber &gt; 3) {
        this.props.unMount()
      } else {
        this.setState({
          questionNumber: this.state.questionNumber + 1
        })
        this.props.changeHeader("Question " + this.state.questionNumber)
      }
    }
  
    render() {
      const questions = ["blargh?", "blah blah blah?", "how many dogs?"]
      return (
        &lt;div class="container-fluid text-center"&gt;
          &lt;h1&gt;{questions[this.state.questionNumber - 1]}&lt;/h1&gt;
          &lt;button type="button" class="btn btn-primary" onClick={this.handleContinue.bind(this)}&gt;Continue&lt;/button&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>