Jammming | Type error: this.props.tracks.map is not a function

https://www.codecademy.com/paths/build-web-apps-with-react/tracks/react-capstone/modules/jammming-capstone/projects/jammming-prj

I’m actually up to step 55 in Jammming but I believe my problem stems from my addTrack() from step 40 - 47.

My error appears when using the UI to add a track from the SearchResults component into my Playlist component triggering this error:

I’m not seeing how this isn’t proper use of the map() .
I’ve checked that my props are being passed correctly to my TrackList component.
My state is working because I’m seeing my hardcoded values.



Can anyone see what I’m doing wrong? My source code is here: https://github.com/david-wade/Jammming

Hi David, I think I can help. I ran into the same problem. Then I recalled that I saw this type of message before, although in a different context. I got this message often when I started JavaScript one or two years ago. It should read " X is not a function at …". It means that what you pass in as an argument is not the proper data type. The map() function works on arrays. So somehow, your this.props.tracks is not an array (probably an object).

I could solve this in the following way: In SearchResults.js:

<TrackList tracks={[this.props.searchResults]} />

I got no more compile errors after this point, though I am not as far as you are.

Regards,

Frank.

1 Like

Hi Frank,

Thanks so much for getting back to me. I figured it out in the end in the end thankfully. I was using map() on something that wasn’t an array, a silly mistake but now I know.

Hi David,
let me add that my suggestion makes the error go away, but it won’t help as you complete the app. The data must be an array right from the beginning, that is,when it is defined in App.js:
constructor(props) {
super(props);
this.state = {searchResults: ,
playlistName: ‘blubber’,
playlistTracks: ,
};

Sorry, but I hadn’t figured this out when I answered your post.

Regards,

Frank.

1 Like

I’m encountering this error as well, but it’s due to the me losing my props when the TrackList component unexpectedly re-renders. Then my props become undefined and I get the “not a function” error. I’ve done a judicious amount of console.logs to figure this out. The props, an array of objects, is set in the App component, that get sent along to SearchResult component, to the TrackList component, and finally to the Track component. I’ve been going over this for hours and can’t figure out why it’s doing this. Hopefully it’s simply a mistake I’m not catching. Anyone else have this issue?

I knew I would have to embarrass myself by typing up a question before I would discover the issue. Turns out I had forgotten that I had forgotten to quote out the TrackList component from the PlayList component after fiddling with it earllier. My TrackList component no longer re-renders and no longer loses its props as a result :slight_smile:

1 Like