Exercise 34 on Jammming project

I’m working on the Jammming project: https://www.codecademy.com/paths/web-development/tracks/front-end-applications-with-react/modules/jammming/projects/jammming-prj;
and stuck on exercise 34 where we need to map through this.props.tracks.

I get the error

which tells me that this.props.track is undefined. edit I forgot to include TrackList.js, which is now shown below:


I backtracked to SearchResults.js where TrackList.js is receiving the props and that looks fine. I’ve included SearchResults.js below:

I backtracked from SearchResults.js to App.js (where SearchResults.js is getting its props from) and everything looked fine there. I’ve included a snippet of App.js below:

I’ve included the src folder here: https://github.com/lamprotes/jammming

I’ve looked at each Codeacademy thread that includes TypeError: Cannot read property ‘map’ of undefined and haven’t been able to trace out the problem yet. I’ve checked spelling and punctuation through and through, and just can’t see what’s causing the error, but this.props.tracks must be undefined. Any guidance would be greatly appreciated.

1 Like

If you look in your browser’s console there’s a stack trace (not the call stack, the component stack)
Some console.log calls in that path can tell you where you lost your value, narrowing down the location of the problem and maybe then it’s enough to find by eyeballing.

(also your git repo is missing project files required to build and run it)

I didn’t upload everything in the project as the node_modules folder had over 100 items in it and github wouldn’t allow me to. With that being said, I took out from PlayList.js and the map function works fine. Why would the removal of the TrackList component allow it to render? I can’t quite seem to see the proper connection. Is it because TrackList is rendered by two components?

Were you supplying the information that the component needed?

everything except that directory. that’s still a couple things more than just src (project meta data required for building and running)

Hi,
did you find the answer? I have the same problem here right now, stuck on step 34, checked everything twice…
Thanks,
Hubert

1 Like
  1. Remove or comment out component in Playlist.js, under render method.
class Playlist extends React.Component {
    
    render () {
        return (
        <div className="Playlist">
            <input defaultValue={"New Playlist"}/>

            REMOVE <TrackList /> here

            <button className="Playlist-save">SAVE TO SPOTIFY</button>
        </div>

        );
    }
}
  1. Later, on step 39 you will add this line - <TrackList tracks={ this.props.playlistTracks} />

Hope this will help you.

1 Like

Thanks for solving this @hans5486045012

I don’t understand why this solution works though. Will you please explain why removing the Tracklist component from Playlist solves the issue?