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.

9 Likes

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?

Same problem, I don’t know for sure why it works, but we can think through it and figure it out. When I tried to console.log the property I noticed that there were two identical arrays of the same objects and that the value of this.props.tracks was null. I’m thinking automatic life-cycle methods are the problem. Ok, as soon as SearchResults pass the prop, the Tracklist component’s lifecycle method didComponentRecieveProps() get’s triggered, so it rerenders BOTH TrackList components, the instance in SearchResults first, then the instance in Playlst, with THAT last instance taking the prop away for itself, leaving us with 2 identical arrays and an empty null for the property. That’s my best guess.

The solution from hans5486045012 worked great for me as well. I think the issue is that in App there are two different components using TrackList. The first one is the SearchResults components (where we pass the prop which gets passed on to TrackList). The second one is the PlayList component. At this step in the project I was not passing any props from App to PlayList and from there to TrackList. Seems like it is this second “path” which throws the error when the .map method gets called without a prop/array.

1 Like

Hi

I have the same issue on STEP34 and its not mentioned on excercise addressing this issue and on video that after using map() your site will down till whatever next step. Can save alot of time

Now kindly fix this please.

Thanks

I was going crazy trying to figure this out. Thank you!!!

Thanks, now it works !!!