Cannot read property 'map' of undefined (Jamming project)

Hey Everyone,

I’m having and issue and I cannot understand how or why.

So There is this component:

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 there is this:

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

class PlayList extends React.Component {
  render() {
    return (
    <div className="Playlist">
        <input defaultValue= {'New Playlist'}/>
          <TrackList tracks={this.props.playlistTracks} />
        <button className="Playlist-save">SAVE TO SPOTIFY</button>
    </div>
          );
        }
};  


export default PlayList;

The page wont render but throw an error saying that: “Cannot read property ‘map’ undefined” unless I remove the component from the PlayList Component. No idea what to do, please help!

1 Like

You could do a conditional, or a try/catch, so that you’re not inadvertently calling map on undefined items.

I’m not sure I can follow this. In my understanding I should have no undefined items since I’m maping throug and array of objects and all of them are defined. If I dont render a Tracklist component in PlayList than it can read all of the objects and props without any of them being undefined. Could you also help me with the try/catch, how to implement it here? Thanks

Edit: after saving the files vs code says that its been compiled successfully…

Great that it runs!

In my understanding I should have no undefined items since I’m maping throug and array of objects and all of them are defined

Then the other logical option would be that you’re traversing the array incorrectly. Either way you’d need to log outputs to catch exactly what kind of misstep it would have been (even if the case is already fixed).

More info on try… catch: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch

Hey, it’s me again, its not running and I feel competely lost. Its still the cannot read property map of undefined but only when I try to render a TrackList component in PlayList…

Also when I try to add a try…catch like this:

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

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


export default TrackList;

It won’t print anything useful to the console…

Are you able to see the tracklist? If I were trying to do this I’d want to have a look at that just to know how to tackle the problem.

I can see it in react dev tools with all the assigned props and all. So the component recieves the needed arrays that its looping through.

Maybe you can try to make a dummy script with the same functionality and just a smaller sample size (a list of 4 items with two properties {name} and {id})) to help you catch where you’re going wrong.

Yeah, I retyped everything that got passed down to certain elements in App.js and its now working, closed a solid 25 open tabs. FeelsGoodMan. Thanks for helping me

1 Like