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} />;
        })
        }
      </div>
    );
  }
}

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

My code repository is at:

https://github.com/acandael/jammming

I appreciate your help,

Anthony

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
src/Components/SearchResults/SearchResults.js
10:        <TrackList tracks={this.props.searchResults} />

src/Components/TrackList/TrackList.js
9:        {this.props.tracks.map(track => {

…and then keep digging in similar fashion…

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

src/Components/App/App.js
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.

6 Likes

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>
</div>

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:

<TrackList
          tracks={this.props.playlistTracks}
          onAdd={this.props.onAdd}
          onRemove={this.props.onRemove}
          isRemoval={true}
        />
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!

Also got stuck on this and spent way too long trying to figure it out. The part that caused the most grief was that the walk through video showed it working correctly at this step, which led me to think I had a typo somewhere.