Jamming .map Problems

Hello all, i’m getting a .map undefined error while working on the Jamming endcap project on React.

it says the prop that i’m attempting to map is undefined, but it is defined and has been sent down through components and all files have access to said components. please look at my code and tell me where I have gone wrong.

the actual object is defined in the App.js :

class App extends React.Component {
constructor(props) {
super(props);
this.state = {
searchResults: [{name: ‘name1’, artist: ‘artist1’, album: ‘album1’, id: 1},
{name: ‘name2’, artist: ‘artist2’, album: ‘album2’, id: 2},
{name: ‘name3’, artist: ‘artist3’, album: ‘album3’, id: 3}]
}
}

  render() {
    return (
      <div>
  <h1>Ja<span className="highlight">mmm</span>ing</h1>
  <div className="App">
     <SearchBar /> 
    <div className="App-playlist">
      <SearchResults searchResults={this.state.searchResults}/> 
      <Playlist /> 
    </div>
  </div>
</div>
    )
  }
}
then in SearchResults.js :

import TrackList from ‘…/TrackList/TrackList’;

class SearchResults extends React.Component {

render() {
        return(
            <div className="SearchResults">
  <h2>Results</h2>
  <TrackList tracks={this.props.searchResults} />
</div>
        )
    }
}
export default SearchResults;

then tracklist.js :

class TrackList extends React.Component {

 render() {
        return (
            <div class="TrackList">
              {
                  this.props.tracks.map(track => {
                      return <Track track={track} 
                           key={track.id} />
                  })
              }
</div>
        )
    }
}
export default TrackList;


Hello, I suspect that you’re on Step 34. The issue is that Step 34 breaks the project for awhile, even if you implemented it perfectly.

The reason for this is that the Playlist component also uses the TrackList component like the SearchResults component does. However, you haven’t set up the flow of data using props to the Playlist component yet. This is done in the next several steps up to Step 39.

Since Playlist isn’t passing anything to TrackList on the tracks prop yet, TrackList attempts to use .map() on undefined.

Keep going through Step 39 and only worry if the issue is continuing after that.

Hi there, thank you so much.

I only had the video guide as reference and it seemingly worked perfectly for them, so I assumed the worst!

Thank you!!! It happened to me as well.
I was getting crazy about that. :wink: