title: SetState after Get Request React
body: <p>I have a handleSubmit method:</p>
  
  <pre><code>state = {
      code: null,
      participant: {},
      participantNotFound: false,
  };
  
  handleSubmit = (event) =&gt; {
      event.preventDefault();
      const {code} = this.state;
  
      axios.get(`/api/participant/${code}`)
          .then((response) =&gt; {
              const participant = response.data.participant;
              console.log(participant)
              this.setState({participant})
          })
          .catch(() =&gt; this.setState({participantNotFound: true}));
  
      console.log(this.state.participant) // THIS IS STILL EMPTY
  };
  </code></pre>
  
  <p>That triggers when the form is submitted:</p>
  
  <pre><code>&lt;form method="POST" onSubmit={this.handleSubmit}&gt;
      &lt;div className="ui action input"&gt;
          &lt;input type="text" placeholder="Enter code" name="code"/&gt;
  
          &lt;select className="ui compact selection dropdown" onChange={event =&gt; this.setState({selectedOption: event.target.value})}&gt;
              &lt;option value="participate"&gt;Participate!&lt;/option&gt;
              &lt;option value="check_status"&gt;Check status&lt;/option&gt;
          &lt;/select&gt;
  
          &lt;button&gt;Submit&lt;/button&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I put a console.log, and it outputs the <strong>participant</strong> correctly, but it doesn't set the participant to the participant that I get from my response.</p>
  
  <p>I have other code after this that checks if participant exists or not, but it doesn't work because the participant never gets set.</p>
  
  <p>Why is this?</p>