title: Cannot read property 'map' of undefined react js
body: <p>I am getting this error while rendering, I am new to React JS , Please tell me what error I am making in mapping?
  Please Help out. I am using axios. and I am trying to fetch the data from //<a href="https://www.reddit.com/r/space.json" rel="nofollow noreferrer">https://www.reddit.com/r/space.json</a></p>
  
  <pre><code>import React, { Component } from 'react';
  import axios from 'axios';
  
  class Apicall extends Component {
  
  
    componentWillMount(){
      this.getReddit();
    }
  
    getReddit(){
      axios.get(`https://www.reddit.com/r/${this.state.subr}.json`)
  
      .then(res =&gt;{
        const posts = res.data.data.children.map(obj =&gt;obj.data);
        this.setState({posts});
      });
  
    }
  
    constructor(props){
      super(props);
  
  
      this.state = {
        post:[],
        subr:'space'
      };
      this.getReddit = this.getReddit.bind(this);
    }
  
  
  
  
  
  
    render(){
      return(
        &lt;div&gt;
          &lt;h1&gt;{`/r/${this.state.subr}`}&lt;/h1&gt;
          &lt;ul&gt;
            {this.state.posts.map(post =&gt;
              &lt;li key={post.id}&gt;{post.title}&lt;/li&gt;
  
            )}
          &lt;/ul&gt;
        &lt;/div&gt;
      );
    }
  }
  
  
  export default Apicall;
  </code></pre>