title: ReactJS: Call a timer function on button click
body: <p><strong>PLEASE NOTE:</strong> This is not a duplicate of <strong><a href="https://stackoverflow.com/questions/34800893/reactjs-need-to-click-twice-to-set-state-and-run-function">ReactJS - Need to click twice to set State and run function</a></strong>. The solution there does not work for me.</p>
  
  <p><strong>This is my initial <code>state</code>:</strong></p>
  
  <pre><code>constructor(props) {
      super(props)
      this.state = {
          /* some code */
          game: { // game-level
              /* some code */
              /* value options: 'ready' 'in-progress', 'paused', 'cleared' */
              status: 'ready'
          },
      } /* END state */
  } /* END constructor */
  </code></pre>
  
  <p>I am trying to change <code>this.state.game.status</code> to <code>in-progress</code> on button click, and once it is changed, I want to start a timer.</p>
  
  <p><strong>The button inside <code>render()</code>:</strong></p>
  
  <pre><code>&lt;RaisedButton label="Start" primary={true}
      onClick={()=&gt; this.changeGameStatus('in-progress')} /&gt;
  </code></pre>
  
  <p><strong>The function that's called on button click:</strong></p>
  
  <pre><code>changeGameStatus = (status) =&gt; {
      console.log('status = ' + status)
      this.setState({
          game: {
              status: status
          }
      })
      console.log('new status:' + this.state.game.status)
  
      this.startTimer()
  }
  </code></pre>
  
  <p><strong>The <code>startTimer()</code> function</strong></p>
  
  <pre><code>startTimer() {
      if (this.state.game.status === 'in-progress') {
          console.log('The timer has started')
          this.timerID = setInterval(
            () =&gt; this.updateTimer(),
            1000
          )
      }
  } /* END startTimer */
  </code></pre>
  
  <p>The problem is, <code>this.state.game.status</code> is not updated on first button click, and therefore, does not start the timer. I had to click the button twice for the whole thing to work, which is not very advisable.</p>
  
  <p><strong>NOTE:</strong></p>
  
  <p>There is an answer to the other question I mentioned above, but it specifies that I call the function inside <code>componentWillUpdate()</code>. It does not work for me, because it calls the <code>startTimer()</code> with every tick, thereby making the timer run twice as fast everytime.</p>
  
  <p>How can I update my state and call the timer function with a single button click? I think this is simple, but I am new to ReactJS, so I have no idea how to do it at the moment. Thank you very much.</p>