title: this.setState isn't working (my state is a number)
body: <p>I am having a problem with: this.setState({score: counter}); For some reason it's not updating. Why? Even when I do this.setState({score: 5}) or score:"a string" it still doesn't work. Am I missing something? Whatever I do, the state won't change. I have to add extra description because the website won't let me post my question.</p>
  
  <pre><code>displayResultsHandler = () =&gt; {
      var counter = 0;
      for(let i = 0; i &lt; this.state.correctAnswers.length; i++) {
        if(this.state.correctAnswers[i] === this.state.userAnswers[i]) {
          counter = counter+1;
        }
      }
  
  this.setState({
    score: counter
  });
  
  console.log("counter: " + counter);
  console.log("score: " + this.state.score); // For some reason, this is always zero
  </code></pre>
  
  <p>}</p>
  
  <p>I added my full code below. Maybe it will help.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import './App.css';
  import Title from './Title/Title';
  import Question from './Question/Question';
  import Aux from './hoc/Aux';
  import SubmitButton from './SubmitButton/SubmitButton';
  
  class App extends Component {
    state = {
      questionArray: [
        "What is 9+10",
        "How many goals did Ronaldo score against Spain in the World Cup 2018",
        "Who Stole Ronaldo's (CR7) greates ever goal?",
        "Which one of these players ruined the NBA",
        "Who is currently number 1 in the internet L rankings?"
    ],
      answerChoicesArray: [
        ["1", "19", "21", "90", "-1"],
        ["1", "3", "5", "0", "-1"],
        ["Pepe", "Messi", "Casillas", "Benzema", "Nani"],
        ["Allen Iverson", "Kevin Durant", "Steph Curry", "Lebron James", "Russel Westbrook"],
        ["Drake", "Pusha T", "Russel Westbrook", "Lil Xan", "Russ"]
      ],
  
      correctAnswers: ["21", "3", "Nani", "Kevin Durant", "Russ"],
  
      userAnswers: ["", "", "", "", ""],
  
      score: 0
  
    }
  
    updateUserAnswersHandler = (oldArray, index, value) =&gt; {
      const newArray = oldArray;
      newArray[index] = value;
      this.setState({
        userAnswers: newArray
      });
    }
  
    displayResultsHandler = () =&gt; {
      var counter = 0;
      for(let i = 0; i &lt; this.state.correctAnswers.length; i++) {
        if(this.state.correctAnswers[i] === this.state.userAnswers[i]) {
          counter = counter+1;
        }
      }
  
      this.setState({
        score: counter
      });
  
      console.log("counter: " + counter);
      console.log("score: " + this.state.score); // For some reason, this is always zero
  
      if(this.state.score &lt; 5) {
        alert("You're dumb asf. Please leave");
      } else {
        alert("Welcome to NASA");
      }
    }
  
    render() {
      // var userAnswers;
      // console.log(userAnswers); How do I pass this as a prop? this.userAnswers? nope. Therefore it has to be a state
      console.log("User Answers are: " + this.state.userAnswers);
      return (
        &lt;div className="App"&gt;
          &lt;div className="container"&gt;
            
              &lt;Title/&gt;
              &lt;h2&gt;Only the most genius of individuals will pass&lt;/h2&gt;
              &lt;hr/&gt;
              &lt;Question
                correctAnswers={this.state.correctAnswers}
                updateUserAnswersHandler={this.updateUserAnswersHandler}
                userAnswers={this.state.userAnswers}
                questionArray={this.state.questionArray}
                answerChoicesArray={this.state.answerChoicesArray} /&gt;
              &lt;SubmitButton
                clicked = {this.displayResultsHandler} /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>