title: React - Passing props to 'ES6 extends' components, and the correct use of 'bind'
body: <p>I am trying to create a simple Inbox, that makes an api call and returns json object containing a list of messages. This is then passed via props down to the 'InboxList' and then 'InboxItem' components.  However, I am struggling to get props down to render each item. </p>
  
  <p>I am also receiving an error when using bind(this), which is the following. </p>
  
  <pre><code>index.js:28 Uncaught (in promise) TypeError: (intermediate value).bind is not a function(…)
  </code></pre>
  
  <p>I believe i need to bind within my componentDidMount method due to es6 syntax, but I do not understand what the error refers to.  Fwiw the json data is coming back successfully.</p>
  
  <p>Any leads on this would be most appreciated</p>
  
  <pre><code>export default class Inbox extends Component {
    constructor() {
      super();
      this.state = {
        messages: [],
      };
    }
  
    componentDidMount() {
      this.serverRequest = axios.get('/api/messages')
        .then(res =&gt; {
          console.log(res.data);
        })
        .catch(res =&gt; {
          if (res instanceof Error) {
            console.log(res.message);
          } else {
            console.log(res.data);
          }
          this.setState({
            messages: res.data,
          }.bind(this));
        });
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;InboxHeader /&gt;
          &lt;InboxList messages={this.state.messages} /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default class InboxList extends Component {
    render() {
      return (
        &lt;ul className="dm-inbox__list"&gt;
          {this.props.messages.map(message =&gt;
            &lt;InboxItem message={message} /&gt;
          )}
        &lt;/ul&gt;
      );
    }
  }
  </code></pre>