TypeError: Cannot read property ‘map’ of undefined

Hi guys ! I’m working on the Jammming project and I got stuck at step 34. I see that the subject has already been treated but I don’t see any answer to my problem.

This is what I got:


And this is the problem:

And as you can see here, before the problem appeared, my TrackList component had the array ‘tracks’:


If you have already done this project, can you help me please ?

Thank you ! :smiley:

before the problem appeared? immediately before, or at some entirely different time? your error message is suggesting the latter. you’d need to make that measurement at the time of the crash.

At the moment I wrote this.props.tracks.map(), the error popped up. Before that, everything was good.

TrackList is used by 2 different components, Playlist and SearchList.

And they both receive their data via props from the App component.

I can recreate your error if I rename my playlistTracks state (and the same with searchResults) so it fails to pass down through the component props to TrackList component.

So you need to check for typos or not passing props down from App correctly.

Try commenting out the map and just console.log(this.props.tracks) to see if you are receiving data.

So you’re saying that doing nothing had an effect… No.
The only explanation here is that your observation isn’t immediately before that line.
The next thing that happens after that observation is that your tracks are successfully mapped over and your function returns the result. You can show this if you adjust your code to assign a variable to the result and then make an observation after having used map.
At some later time, the situation is different. But a whole lot may have happened between your observation and then. You’d need to make that observation at the time of the crash.

Are you saying that the problem comes from the fact that Track is in two different components, so I have to make sure that Track that is in Playlist has to receive data and Track that is in SearchResults as well ?

They’re saying you’re doing that multiple times and you’re looking at the wrong occurrence. You’re looking at the one that doesn’t crash.

Well I found out that the problem came from the Track that was in Playlist.js. Is It because this instance had no data while the one in SearchResults did ? I want to undrestand this error so that I can deal with It next time.

You can use console.log to test whether that’s the case. What would you expect to see if it was, or wasn’t that way? And then when you run it, what do you see?

If it’s executed twice, with different inputs, then, if you print the input, you’d see it twice, and you’d see different input.