title: State array does not render properly in React.js
body: <p>I am working on a hacker news clone I am trying to get the ids of the top stories from their api using axios in componentDidMount and then making another axios call to get the stories and push them in a state array but when I try to map over and render that array nothing shows up</p>
  
  <pre><code>class App extends Component {
  
    constructor(props) {
      super(props);
      this.state = {
        posts: []
      }
    }
  
    componentDidMount() {
      axios.get('https://hacker-news.firebaseio.com/v0/topstories.json')
        .then( result =&gt; {
          result.data.slice(0, 10).forEach(element =&gt; {
            axios.get('https://hacker-news.firebaseio.com/v0/item/' + element + '.json')
              .then( value =&gt; {
                this.state.posts.push(value)
              })
              .catch(err =&gt;{
                console.log(err)
              })
          })
        })
        .catch(err =&gt; {
            console.log(err);
        })
    }
  
  
    render() {
      return (
      &lt;div&gt;
        &lt;Header title="Hacker News" /&gt;
        {this.state.posts.map( (element, index) =&gt; &lt;Post key={element.data.id} serialNum={index} postTitle={element.data.title} postVotes={element.data.score} postAuthor={element.data.by} /&gt;) }
      &lt;/div&gt; 
      )
    }
  }
  </code></pre>