title: Making an Axios call within a forEach function to ammend an object is not being recognized in the render despite being in the state
body: <p>I'm trying to learn the basics of a full stack React app and I'm running into a really weird issue with my API calls. </p>
  
  <p>I want to retrieve a list of trailers from a database that get returned as an array of objects. I then use a promise to loop over that array, and make a separate API call on to each item in the array to add a key value pair to the object. After I've built that array of objects, I set it to my app state, then pass it down through a prop to the child component that should render a list of elements based on the info in the array.</p>
  
  <p>Right now, the console logs the array the component receives and all the data is present, however, every field can be rendered except the one that is added within the forEach loop.</p>
  
  <p>I have removed the API call from the forEach loop, and instead just set a static value in the loop, and the information gets rendered properly as expected. So I'm sure the issue is with the API call being in the loop. I can't figure out why though. The log shows that array is complete, so it doesn't seem to make sense that the render can't find the data.</p>
  
  <pre><code>// The API call
  
  loadUserAndTrailers = () =&gt; {
          let trailers = []; 
          axios.get("http://localhost:5000/api/trailers")
          .then (res =&gt; {
              trailers = res.data;
          })
          .then (() =&gt; {          
              trailers.forEach(trailer =&gt; {
  
   axios.get(`http://localhost:5000/api/votes/user/${this.state.user.id}/${trailer.TrailerID}`)
                  .then (res =&gt; {
                      const vote = res.data[0].Vote;
                      trailer.vote = vote;
                  })
              })
          })
          .then (() =&gt; {
              this.setState({trailers: trailers});
          })
  }
  
  // The child component
  
  const TrailerList = props =&gt; {
  
      console.log(props)
  
      const trailers = props.trailers.map(trailer =&gt; {
          return &lt;div&gt;{trailer.vote}&lt;/div&gt;
      });
  
      return &lt;div&gt;{trailers}&lt;/div&gt;;
  };
  
  // The return in the parent component
  
  return (
    &lt;div className="container"&gt;
      &lt;div className="content"&gt;
        &lt;h1&gt;Trailers&lt;/h1&gt;
        &lt;div className="trailers"&gt;
        &lt;TrailerList trailers={this.state.trailers}&gt;&lt;/TrailerList&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  );
  </code></pre>
  
  <p>The console.log(props) shows me a completed array with an array of objects with this key value existing { vote: 1 } yet it renders nothing. How can this be? I've been slamming my head against a wall for two days now, but I'm admittedly new to APIs and promises. I was under the impression the promise should make sure the call is completed before moving on to the next step, and my properly logged state seems to imply that that aspect of the code is functioning as expected.</p>