Issues with step 34 of Jamming

Hi!

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.

Here you can find the link to the files as they are now for me GitHub - GiselaCA/Jamming

Thanks in advance to anyone that can help, I’ve been at my wits end for over a week!

Hi Gisela,
you will pass down the tracks as props in step 38.
A render error from step 34 to step 37 is ok.
That should resolve in step 38.

hello,

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.

thanks in advance…

Hi there,

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

Hi,

thank you! I’ll have to have another scan soon. :upside_down_face:

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?

Hope that helps!

1 Like

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.

Actually, I think @elnicomapero82885031 said the same thing!

You, sir, are a lifesaver!
Such a great tip, thanks!

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.

1 Like

I am not too sure how, but it actually fixed itself after completing step 39. Hope this helps

Can someone post the link to the walkthrough video? For some reason I can’t find it.