title: Props correct initially then second render caused them to disappear
body: <p>I'm currently going through a Codecademy full-stack course, and building one of the React projects.</p>
  <p>So far, it has a few components, but these three are causing me bother.</p>
  <p>App.js</p>
  <pre><code>class App extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        searchResults: [{ name: 'Hello', artist: 'Hey there', album: 'Woah!', id: 12345 }]
      }
    }
  render() {
    return (
      &lt;div&gt;
        &lt;h1&gt;Ja&lt;span className=&quot;highlight&quot;&gt;mmm&lt;/span&gt;ing&lt;/h1&gt;
        &lt;div className=&quot;App&quot;&gt;
          &lt;SearchBar /&gt;
          &lt;div className=&quot;App-playlist&quot;&gt;
            &lt;SearchResults searchResults={this.state.searchResults} /&gt;
            &lt;Playlist /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  }
  
  export default App;
  </code></pre>
  <p>SearchResults</p>
  <pre><code>class SearchResults extends React.Component {
      constructor(props) {
          super(props)
      }
  
      render() {
          return (
              &lt;div className=&quot;SearchResults&quot;&gt;
                  &lt;h2&gt;Results&lt;/h2&gt;
                  &lt;TrackList tracks={this.props.searchResults} /&gt;
              &lt;/div&gt;
          )
      }
  }
  </code></pre>
  <p>TrackList</p>
  <pre><code>class TrackList extends React.Component {
      constructor(props) {
          super(props)
          
          console.log(props);
      }
  
      render() {
          return (
              &lt;div className=&quot;TrackList&quot;&gt;
              
                  { this.props.tracks.map(track =&gt; {
                      &lt;Track 
                          name={track.name}
                          artist={track.artist}
                          album={track.album}  /&gt;
                  }) }
  
              &lt;/div&gt;
          )
      }
  }
  </code></pre>
  <p>Initially, app.js has state called 'searchResults', which is a hard-coded array with an object which has a few properties. This gets passed down to the SearchResults component via a prop called searchResults, and then passed down to TrackList via another prop called 'tracks'.</p>
  <p>I then want to map through the passed down prop and render the results on screen.</p>
  <p>However, whenever I try to load my app, I'm getting an 'undefined error' when evaluating 'this.props.tracks.map'. Having added console logs, I believe this is because my app renders twice - I.e. there are two console logs in my console.</p>
  <p>The first log contains the searchResults state passed down. The second returns 'undefined'.</p>
  <p>I've no idea why this is happening, but does anyone know how to resolve this problem and why my props are coming up initially then being reloaded and becoming undefined?</p>
  <p>Please let me know if anything is missing or you need clarification!</p>