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.

11 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.

I was also stuck! Thank you for this.

Had the same annoying issue. I don’t know which step that problem came from. I’ll move on and we’ll see what happens but thank god I found this post because it was driving me crazy saying it compiled successfully yet browser showed an error. Thanks!

Hi bleier,
I was having the same problem than you and also got stuck in 39, my problem was that I had multiple state declarations in App.js, once I put playlistName and playlistTracks as properties of the same state object it worked fine, hope that helps a bit :slight_smile:

Thank you so much! I was stuck on this one too.

At the beginning, one of the first steps is to call the component instances in differents components., the same time you import those components.

Hello. Please can somebody help me. It still doesn’t work for me. Stuck in task 34.
TypeError: this.props.isRemoval is not a function
Here is my code:

import React from ‘react’;
import ‘./TrackList.css’;
import Track from ‘…/Track/Track’;
class TrackList extends React.Component {
render() {
return (


{
this.props.tracks.map(track => {
                  return <Track track={track}

                        key={track.id} />
              })
          }         
        </div>
    )
}

}
export default TrackList;

import React from ‘react’;
import ‘./Playlist.css’;
import TrackList from ‘…/TrackList/TrackList’;
class Playlist extends React.Component {
render() {
return (

<input defaultValue={“New Playlist”} />

SAVE TO SPOTIFY

)
}
}
export default Playlist;

import React from ‘react’;
import ‘./SearchResults.css’;
import TrackList from ‘…/TrackList/TrackList’;
class SearchResults extends React.Component {
render() {
return (


SearchResults




)
}
}
export default SearchResults;

Thank you so much. got stuck on this for a long.

But anyone please explain the specific reason that when remove the Tracklist on Playlist, it can render smootly?