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.

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.