title: How to update state after an API call completes and before the component has rendered
body: <p>I have a function which makes an API call to fetch an item and then stores that object array in a state variable 'data'. But the variable is not getting updated. On logging, it shows an empty array. On logging the API call result, I get the required response. That means i'm getting the data from the call but just can't put that in my 'data' variable.</p>
  
  <p>Here's the function</p>
  
  <pre><code>componentWillMount(){
      window.scrollTo(0,0);
      const itemId = parseInt(this.state.id);
      Axios.get(`http://localhost:5000/item/getitem/${itemId}`)
      .then(res =&gt; {
          this.setState({
              data: res.data
          })
      })
      .catch(err =&gt; console.log(err));
  }
  </code></pre>