title: ReactJS - load the data before rendering the component
body: <p>In the ReactJS, I am changing the route to some new one with an "id", then based on this "id", I must call an API and fetch data.</p>
  
  <p>I have used the API call in <code>componentDidMount</code> and <code>componentWillMount</code> and tried <code>setState()</code> to have my data in the state. but they didn't work in my case.</p>
  
  <p>The problem is in the <code>render()</code> part when I want to use my data (from state), the data is not there because the API call takes some time to update the state.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>  componentDidMount() {
      api.get(id).then((response) =&gt; {
       this.setState({response,});
    });
  </code></pre>
  
  <p>With this approach, I don't have the data when I want it (render method), it will eventually be in the state but too late!</p>
  
  <p>How can I change my approach to fix the loading problem?</p>