title: ReactJS Array.push function not working in setState
body: <p>I'm making a primitive quiz app with 3 questions so far, all true or false. In my <code>handleContinue</code> method there is a call to push the users input from a radio form into the <code>userAnswers</code> array. It works fine for the first run of <code>handleContinue</code>, after that it throws an error: <code>Uncaught TypeError: this.state.userAnswers.push is not a function(…)</code></p>
  
  <pre><code>import React from "react"
  
  export default class Questions extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        questionNumber: 1,
        userAnswers: [],
        value: ''
      }
  
      this.handleContinue = this.handleContinue.bind(this)
      this.handleChange = this.handleChange.bind(this)
    }
  
    //when Continue button is clicked
    handleContinue() {
      this.setState({
        //this push function throws error on 2nd go round
        userAnswers: this.state.userAnswers.push(this.state.value),
        questionNumber: this.state.questionNumber + 1
      //callback function for synchronicity
      }, () =&gt; {
        if (this.state.questionNumber &gt; 3) {
          this.props.changeHeader(this.state.userAnswers.toString())
          this.props.unMount()
        } else {
          this.props.changeHeader("Question " + this.state.questionNumber)
        }
      })
      console.log(this.state.userAnswers)
    }
  
    handleChange(event) {
      this.setState({
        value: event.target.value
      })
    }
  
    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;div class="radio"&gt;
            &lt;label class="radio-inline"&gt;
              &lt;input type="radio" class="form-control" name="trueFalse" value="true" 
              onChange={this.handleChange}/&gt;True
            &lt;/label&gt;&lt;br/&gt;&lt;br/&gt;
            &lt;label class="radio-inline"&gt;
              &lt;input type="radio" class="form-control" name="trueFalse" value="false" 
              onChange={this.handleChange}/&gt;False
            &lt;/label&gt;
            &lt;hr/&gt;
            &lt;button type="button" class="btn btn-primary" 
            onClick={this.handleContinue}&gt;Continue&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>