title: Getting error with ES6 `array.find`: ReactJS
body: <p>I have the following code, which is returning the error: </p>
  
  <blockquote>
    <p>"cannot read property 'albumCover' of undefined</p>
  </blockquote>
  
  <p>Based on the code at line 24.</p>
  
  <pre><code>import React, {Component} from 'react';
  import albumData from './../data/albums';
  
  class Album extends Component {
      constructor(props) {
          super(props);
  
          const album = albumData.find( album =&gt; {
              return album.slug === this.props.match.params.slug
          });
  
          this.state = {
              album: album
          };
      }
  
      render() {
          return (
              &lt;section className ="album"&gt;
                  &lt;section id="album-info"&gt;
                      &lt;img id="album-cover-art" src={this.state.album.albumCover} /&gt; &lt;- error
                      &lt;div className="album-details"&gt;
                          &lt;h1 id="album-title"&gt;&lt;/h1&gt;
                          &lt;h2 className="artist"&gt;&lt;/h2&gt;
                          &lt;div id="release-info"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/section&gt;
            &lt;/section&gt;
          );
      }
  }
  
  export default Album
  </code></pre>
  
  <p>My understanding is that this is due to a problem with the context of 'this' not being set correctly, but as far as I can see, this code should execute correctly. Can anyone tell my why I'm getting the error, and how to set the right context for 'this'?</p>