ReactJS onClick state change one step behind

Question

I\'m building a very primitive quiz app with ReactJS and I\'m having trouble updating the state of my Questions component. Its behavior is it renders the correc

Answer 1

As Sandwichz says, if you access the state right after using setState, you have no guarantee of the actual value. You could do something like this:

handleContinue() {
  if (this.state.questionNumber > 3) {
    this.props.unMount()
  } else {
    const newQuestionNumber = this.state.questionNumber + 1
    this.setState({
      questionNumber: newQuestionNumber
    })
    this.props.changeHeader("Question " + newQuestionNumber)
  }
}

Answer 2

setState() is not necessarily a synchronous operation:

setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state aft

There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.

For this reason, this.state.questionNumber may still hold the previous value here:

this.props.changeHeader("Question " + this.state.questionNumber)

---

Instead, use the callback function that is called once the state transition is complete:

this.setState({
    questionNumber: this.state.questionNumber + 1
}, () => {
    this.props.changeHeader("Question " + this.state.questionNumber)
})