Jammming project - TrackList props are showing in dev tools but trying to use map() on them gives a TypeError showing as undefined

I’m having a problem whereby I’m getting the following error in relation to task no. 34:

This is my full TrackList.js file:

import React from 'react';
import './TrackList.css';
import Track from '../Track/Track';

class TrackList extends React.Component {
    render() {
        return (
            <div className="TrackList">
                {
                    this.props.tracks.map(track => {
                        return <Track track={track} key={track.id} />
                    })
                }
            </div>
        );
    }
}

export default TrackList;

And this is the SearchResults.js file where the props are passed down:

import React from 'react';
import './SearchResults.css';
import TrackList from '../TrackList/TrackList';

class SearchResults extends React.Component {
    render() {
        return (
            <div className="SearchResults">
                <h2>Results</h2>
                <TrackList tracks={this.props.searchResults} />
            </div>
        );
    }
}

export default SearchResults;

Before attempting to use map() on the “tracks” props I checked dev tools to be sure the props were being passed down successfully and this is what I got for props on the TrackList component:

{
  "tracks": [
    "{album: \"Madman Across The Water\", artist: \"Elton J…}",
    "{album: \"Love Story\", artist: \"Tim McGraw\", id: 2, …}",
    "{album: \"Lullaby Renditions of Elton John\", artist:…}",
    "{album: \"Tiny Dancer\", artist: \"The White Raven\", i…}"
  ]
}

Can anyone help me understand why I’m getting the error?

https://www.codecademy.com/paths/web-development/tracks/front-end-applications-with-react/modules/jammming/projects/jammming-prj

I too have no clue and I’m stuck at the same point with the same error message. From messing around, I have found that .map() is working at the SearchResults level (Child) but stops working at the next level down (TrackList = Sibling). This is probably why the ravenous project works, the .map() is only one level down, in BusinessList.
Creating a new ‘state’ in SearchResults.js and populating it with the incoming props variable doesn’t help - the error stays the same. I suspect that we may have a newer JS level and we might have to back off to a previous release.

Just chipping in to say I’m having exactly the same problem. Would be delighted if anyone can explain why the props.tracks show up correctly in devtools but give an “undefined” error when I try to access them in the code; that’s totally baffling to me.

import React from 'react';
import './TrackList.css';
import Track from '../Track/Track';

class TrackList extends React.Component {
    render() {
        return (
            <div className="TrackList">
                {
                    this.props.tracks ?
                        this.props.tracks.map(track => {
                            return <Track track={track} key={track.id} />
                        }
                        : console.log(this._reactInternalFiber._debugOwner.type.name)
                    )
                }
            </div>
        );
    }
}

export default TrackList;

If you try the above, will it render anything at any point? If not, it should write the name of the parent that called it in the console, what is the name of it?

Without the whole project, it is hard to see the data flow and speculate, especially as you as using dev tools it shows a value. How many places have you used TrackList or SearchResults? It possible one of them is not having the correct value passed into it so it becomes undefined, or search results becomes undefined somehow.

Thanks for the reply. I’ve moved on to subsequent lessons, but I will backtrack and give this a try soon. I’ll post the results if anything useful comes of it.

I have the same issue.

Interestingly though, when I console log(props.tracks), it shows up, but THEN it console logs again as undefined (without me even repeating the console log call).

It’s as if props.tracks starts off as defined and then becomes undefined.

I was getting this error a lot throughout writing the whole app, for various reasons.
A lot of times I found that its caused by functions not being set up correctly (for example not having “this” bound, not referencing objects correctly, etc) which in turn makes them return undefined as their value.
As @jagking said its hard to figure this out without the whole project.
Best of luck!

Hi @jagking

Initially I got an error but in moving the console.log() line outside of the map() parentheses, this now works!

Thanks very much for your input. Is there anything more you wouldn’t mind sharing to explain what’s happening here as I’m not following the reason for getting the error vs. not?

If it helps, here’s the full project: https://github.com/gideongoddard/jammming

Ops my bad, yeah the console log part was meant to be outside of the map.

What that is doing is if this.props.tracks is falsey (such as undefined) it will log what component created the tracklist component otherwise it will render the track components.

If you look at your console in the browser you should see where the issue is.

? : Is a ternary operator, it’s just shorthand for if else. ? Runs if true : runs if false.

If I use the ternary operator like you’ve done, it both renders the Track components AND console logs ‘Playlist’.

I’m glad that it’s rendering the Track components, why would love to know why it’s console logging ‘Playlist’ as well.

There must be a reason why this.props.tracks is truthy initially and then undefined. There’s something to be learnt here but I don’t know what it is…

You’ve answered the question for both of you.
Look at your App.js. In your render you have a Playlist element, correct?

You also have this on it playlistName={this.state.playlistName} yes?

Where is this.state.playlisyName defined? If it is like @gideongoddard’s code then it isn’t. And in Playlist you have this line <TrackList tracks={this.props.playlistTracks} />, right? So now you can see why it becomes undefined.

So it have a value when TrackList is used in SearchResults but then it renders the PlayList and that is when that instance of the TrackList component gets a this.props.tracks that is undefined. Remember, you have 2 individual TrackList elements with their own props being passed in.

If multiple people are getting here from following the same material, either the material isn’t clear on what you should be doing or it is wrong.

Awesome, thank you so much, I get it now :slight_smile:

I think the tutorial needs to be updated slightly to prevent people getting this error.

Thanks @jagking, absolutely get this now.

When following the guidance of the tasklist, you hit this issue before the tasks to define playlistTracks that will then get passed down so it could be more helpfully structured.

Really appreciate your explanation though. :+1: