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:
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.
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?
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.
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
Hello, just remove the Tracklist component from the time being and you will be able to add again later on the exercise when it is required. You will pass playListTracks as a prop to the trackless.