Issues with step 34 of Jamming

Projects
,
1

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.

image
image1920×1080 211 KB

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!

2 Likes
2

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.

2 Likes
3

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…

4

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

5

Hi,

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

6

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.

7

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!

8 Likes
8

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.

9

Actually, I think @elnicomapero82885031 said the same thing!

10

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

11

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.

3 Likes
12

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

13

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

14

I also get stuck here.

I find that the props has been passed to the Tracklist.js successfully after inspecting the code:
image

But it still reminds me the this.props.tracks is undefined as you posted:

image
image800×255 14.3 KB

So it really drive me mad…

I’ll go through to the step 39, and if it’s succeful I’ll come back.

15

It really works after accomplishing step 39! And as @elnicomapero82885031 said, <TrackList> without property is the reason.

1 Like
16

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.

17

thanks for those tips, it was a great help to solve my problem.

18

Thanks for the answer, forgot to comment that component out and after commenting it out the app works again.

19

Thank you so much! :smiling_face: I had been struggling with this for more than I want to admit :sweat_smile: