title: How to wait for .map() to finish executing before continuing on to next lines of code
body: <p>How do I go about waiting for all the posts to be pushed to the posts array before updating the state?</p>
  
  <p>I had to iterate over an array of post ID's to get the top posts on HackerNews and then turned all those ID's into singular post links and want to store the data from the single post links in an array so I can iterate over that array to render it in the DOM.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, {Component} from 'react';
  import axios from 'axios';
  import Post from './Post';
  
  class ContentWrapper extends Component {
    constructor(props){
      super(props);
      this.state = {
        posts: []
      }
    }
  
    componentDidMount(){
      const topStories = 'https://hacker-news.firebaseio.com/v0/topstories.json?print=pretty';
      // `https://hacker-news.firebaseio.com/v0/item/.json?print=pretty`
      axios(topStories).then(res =&gt; {
        const posts = [];
        res.data.map(val =&gt; {
          const url = `https://hacker-news.firebaseio.com/v0/item/${val}.json?print=pretty`;
          return axios.get(url).then(res =&gt; {
            posts.push(res.data);
          }).then(res =&gt; this.setState({posts: res}));
        });
      });
    }
  
    render() {
      const posts = this.state.posts.map((val, i) =&gt; {
        return &lt;Post key={i} title={val.title} author={val.by} /&gt;
      });
      return (
        &lt;div className="content-wrapper"&gt;
          &lt;h2&gt;{this.props.currentSource}&lt;/h2&gt;
          {posts}
        &lt;/div&gt;
      )
    }
  }
  
  export default ContentWrapper;</code></pre>
  </div>
  </div>
  </p>