TypeError: Cannot read property 'map' of undefined in REACT project?

Question

I'm working on a Codecademy project, Jammming, creating a playlist maker with the Spotify API. I've searched everything online, other repos, videos, and I still keep getting the mapping error. I'm not sure what's up? Any ideas?

Posted on github here: https://github.com/carriepresley/jammming

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 
                    key = {track.id}
                    track = {track}
                    />
                })
            }
            </div>
        )
    }
}
export default TrackList;

Brian Thompson · Accepted Answer · 2020-11-17 22:32:48Z

This is a really common error that you'll almost certainly encounter again, but the reason for it varies. It is usually caused by data that is loaded asynchronously, meaning at the beginning the data is empty (in your case tracks) and later on it gets filled with an array, but there are other causes too which I will explain later.

There are several methods to make sure this doesn't break your app.

The quick and dirty way is to just check that the data is truthy before accessing properties: data && data.map. I only recommend doing this if there is no better way available, it can sometimes hide an error instead of fix it.

Personally I think the best practice is to make sure your variables are defaulted to empty structures representing what the data will look like. It looks like you already do this in your App.js by defaulting both searchResults and playlistTracks to be arrays in state.

The reason I prefer this, is that now if you still get an error, you know the problem is not an async issue, but something else. Such as forgetting to pass a prop a few levels up (App.js):

<SearchResults searchResults = {this.state.searchResults}/>
//<Playlist/> 
<Playlist tracks={this.state.playlistTracks} /> // Pass it the prop it needs

Playlist attempts to give TrackList the prop tracks from this.props.tracks, but it was never given that prop from App.js so it is undefined.

<TrackList tracks = {this.props.tracks}/> // this.props.tracks is undefined from App

This is why you have the error "Cannot read property .map of undefined". Simply checking if this.props.tracks is not undefined will stop the error, but will hide the bug!

krimo · Accepted Answer · 2020-11-17 22:10:54Z

1

try :

  <div className="TrackList">
        {this.props.tracks && this.props.tracks.map((track) =>{
                return <Track 
                key = {track.id}
                track = {track}
                />
            })
        }
        </div>

answered Nov 17, 2020 at 22:10

krimo

6942 gold badges8 silver badges27 bronze badges

1 Comment

Carrie Over a year ago

It WORKED! Thank you so much Krimo!

HTF Games Studio · Accepted Answer · 2021-11-27 11:35:32Z

0

For the Problem Solution: Track 34 generate an Error to Who follow the video walkthrough Cause: Track 32 is repeated 2 times in the video so the Track 33 is missing inside the video walkthrough

Solution:

Inside the App.js Find

<Playlist/>

change in

<Playlist searchResults={this.state.searchResults}/>

Inside Playlist.js find

<TrackList />

change in

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

answered Nov 27, 2021 at 11:35

HTF Games Studio

1511 gold badge1 silver badge10 bronze badges

Collectives™ on Stack Overflow

TypeError: Cannot read property 'map' of undefined in REACT project?

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related