Jamming project stuck on exercise 34

Hi, I’m working on the Jammming project.
Currently I’m stuck on exercise 34 to do a mapping through the tracks objects and render every track.

I’m getting a TypeError: Cannot read property ‘map’ of undefined.

I checked the code and everything looks like the code in the support video:

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

So I’m not sure what is causing this problem.

My code repository is at:


I appreciate your help,


Your error message tells you something about what value this.props.tracks refers to. If you tried to get map from that then that means you expected it to be something else. Why did you expect it to be something else? If you think you defined it somewhere, then, clearly not, and that’s the problem, and that’s where you’d look. Or, maybe you meant something else, in which case, what, and where is that, and then use that instead.

You might search for that variable if you’re not sure where you would have set it:

$ rg tracks
10:        <TrackList tracks={this.props.searchResults} />

9:        {this.props.tracks.map(track => {

…and then keep digging in similar fashion…

$ rg searchResults
10:        <TrackList tracks={this.props.searchResults} />

11:      searchResults: [
27:            <SearchResults searchResults={this.state.searchResults} />

Hi ionatan,

I’m not fully getting your feedback. I checked the passing of information through the App.js component through SearchResult.js and TrackList.js . The searchResults prop is correctly passed through the components.
If I check the TrackList component in Chrome Developer Tools, there is a tracks prop with 3 track objects.
So I don’t understand why I get a TypeError when I want to do map() on props.tracks.

Your type error says that this.props.tracks is undefined. (assuming that’s the location of the error anyway)
So, somewhere you did lose it. The question is where, and you’d look backwards to find that.

found the culprit. Apparantly a TrackList component was also put in the Playlist component. Removing the TrackList component from the Playlist component fixed the issue.

Thanks for your help ionatan.


Hey there! :slight_smile:

I was having the same exact problem and although deleting the TrackList component inside Playlist.js solves the issue, it does not allow you to pass the playlist tracks from the ‘Playlist’ component to the ‘TrackList’ component. (Step 39).

You kinda need that TrackList component in Playlist.js, as that’s where the this.props.playlistTracks will be found…

<div class="Playlist">
  <input value="New Playlist"/>
  <!-- Inside this TrackList component I mean track="etc, etc" -->
  <button class="Playlist-save">SAVE TO SPOTIFY</button>

I’m still stuck on step 39, bu have you found a way to pass down playlsit to tracklist without triggering the same error?

Hi bleier,

I’m at step 96 now. Everything works. My TrackList component inside of PlayList.js looks like this:

1 Like

Thanks for the solution to step 34, system!

Great! I was also stuck with this.

Had the exact same problem and spent close to 4-5 hours trying to figure this out. Thank you!