Jamming project stuck on exercise 34

Check this post for the next step of jamming
https://discuss.codecademy.com/t/feature-request-jammming/486290/2

As I understand because the when the component is calling the component it does not pass the tracks property.
So when you get the error message it does not mean that App -> SearchResults -> Playlist passing of your object is the problem but, that App also renders which in turns calls but you have not passed the searchResults Object from App -> Playlist -> Playlist.

2 Likes

I also have the same issue and I fixed it after I read your suggestion. Thank you for your solution!

Thanks for the solution @matthiasludwig ! I had the same issue as the original post and it makes perfect sense after reading your responses.

Cheers!

I think the solution and it works : is to check first that the array we pass to the map function is not null by adding a method ( renderMap) in the component TrackList :
class TrackList extends React.Component {

renderMap(){
 if (this.props.tracks){
    
  return  this.props.tracks.map(track => {return <Track track={track}  key={track.id} onAdd={this.props.onAdd}/> });
    
 } 
}

render() {

    return (
        
        <div className="TrackList">
        {this.renderMap()}
        </div>
    
    )
        
}

}

I think the solution and it works : is to check first that the array we pass to the map function is not null by adding a method ( renderMap) in the component TrackList :
class TrackList extends React.Component {

renderMap(){
 if (this.props.tracks){
    
  return  this.props.tracks.map(track => {return <Track track={track}  key={track.id} onAdd={this.props.onAdd}/> });
    
 } 
}

render() {

    return (
        
        <div className="TrackList">
        {this.renderMap()}
        </div>
    
    )
        
}

}

THANK YOU VERY MUCH !!! oh my god I’ve been struggling 3 days with this issue. Thank you and be safe <3

Thanks, I had the same problem. It solved the issue!!!

Yes. Paying attention to the video you see the guy comments out the TrackList / (the one in Playlist file) component because it will not work without any props. Btw I commented literally what the step said, so joke is on me.

@system9157688264 thanks you saved morning. I had the same issue. Thanks @ionatan to you as well. Cheers!

I had same issue, problem was that i pass props as playlistTracks={playlistTracks} where its should be tracks={playlistTracks}
and didnt had any more issues :slight_smile:

This was the solution for me! Thank you so much for sharing. It’s crazy that you can literally follow the “Get Unstuck” video line for line and not get yours to display in the browser while Rob’s did.

I also was stuck on 34 with the same error: map() …tracks is undefined.
go up till task 39, and you will get unstuck :partying_face:
TrackList is used in SearchResult.js and in Playlist.js, you need to define tracks in both (tracks gonna be different)
( or you can delete <Playlist /> from App.js to test you code, then add it back )
Hope it will help
Happy coding:)

it really helps bro <3

I got stuck on this one for a while too, so I went back to exercise 33 and saw in devTools that tracks wasn’t defined. Turns out the problem with mine was that I wasn’t being consistent with my capitalization of searchResults. It’s used a lot so it’s difficult to keep track of. Hope this helps!

Yeah I managed to figure this out as well, though I just commented out the TrackList component from Playlist.js until Step 39. I had initially gotten stuck again because the named the tracks prop in Playlist.js as “playlistTracks” and it showed me an error, so I changed that to “tracks” and it was working again.

Would be nice if someone could explain why it is the same prop name has to be used in both instances though. As much as I’ve gotten past this issue I still don’t really understand why I had to solve it the way I did.