title: Multiple API Calls in React
body: <p>I am making an app where I receive data from an API. Once I get this data I want to make another call to the same API with the endpoint that I got from the first call.</p>
  
  <pre><code>fetch(req)
      .then((response)=&gt;(
          response.json()
      )).then((json)=&gt;{
          console.log(json)
          json.meals.map((obj)=&gt;{
              let url = `https://spoonacular-recipe-food-nutrition-v1.p.mashape.com/recipes/${obj.id}/information`
              let req = new Request(url,{
              method: 'GET',
              headers: header
          })
          fetch(req)
          .then((response)=&gt;(
          response.json()
          )).then((json)=&gt;{
              console.log(json);
          this.setState((prevState)=&gt;{
                  recipe: prevState.recipe.push(json)
          })
          })
          })
          this.setState(()=&gt;{
              return{
                  data: json
              }
          })
      })
  </code></pre>
  
  <p>I am making two fetch requests here but the problem is the data from the first response is output after second fetch request. Also the <code>state: data</code> gets set before <code>state: recipe</code> and the components render with the data from <code>state: data</code>.</p>
  
  <pre><code>render(){
        return(
          &lt;div className="my-container"&gt;
          &lt;EnterCalorie getData={this.getData}/&gt;
          &lt;MealData data={this.state.data} recipe={this.state.recipe}/&gt;
          &lt;/div&gt;
        )
      }
  </code></pre>
  
  <p>How can i make sure both get passed down at the same time?</p>