Iam having issues with step 34 of Jamming. I have tried to check what other have said about the error of .map undefined but have not been able to solve my issue. I have even tried to do it step by step with the video tutorial two times but there must be something I am missing because I keep on getting the same problem.
From what I could understand the issue is because props is not defined when I call it. I have double checked App.js, SearchResults.js and TrackList.js many times but cannot find the error. I am guessing it is something very stupid detail that I am overlooking so please help.
I have just got to this project and have the exact same issue. I have followed the video tutorial from the very beginning in slow-mo to make sure I did not miss anything ( very painstaking !) but so far as I can tell, my code is exactly the same. I have continued passed it onto step 44 so far and it still is not rendering.
did You manage to work out your issue? as it’s driving me mad.
I ended up repeating it from scratch but being SUPER ATTENTIVE to what was being written in upper and lower case. There were one or two mistakes of this type that were causing problems and I initially couldn’t find it cause technically spelling was correct but while comparing my brain was paying attention to the content and ot the form (don’t know if it makes sense?). It is a very stupoid mistake and a very difficult to catch so at least for me it was easier to start over than to cross check everything
So I am having the same issue. I went back and triple checked all my variables and they are all the correct case matching. Something I am really confused about, is that if I delete the code block that contains the map method,
{
this.props.tracks.map(track => {
return
it works and when you pull up devtools, it shows that tracklist is indeed getting passed props and tracks. When I put in this code though, it gives me the error saying it cannot do map on undefined like its not getting props and tracks. I am not sure if I am doing a syntax error or what.
You did well in checking in React Dev Tools and looking for props and state there. But I advice you to come back and open it up again, and now check: is there any other <TrackList /> ? If so, does it also have props passed?
This error has also happened to me and I’ve been trying to solve it for quite a bit. Eventually, I believe this happens due to having 2 components in App.js. While one has the expected props to display the track’s info, the other component (rendered by ) doesn’t work because, even though it uses the same component class as the first , the props are only defined when is rendered by , causing an error.
they really should mention this anywhere on the tutorial, walkthrough video or anywhere! thank you for this note, I was about to chuck my computer out of the window, lol.
Thank you! This was my problem. I had a rendered under my playlist component with no props passed, and once I deleted that it solved the problem for me.
I had been struggling with this for more than I want to admit 