Jamming - TypeError: Cannot read property 'map' of undefined

Hi,
Can someone help me resolve error as following:

×

TypeError: Cannot read property ‘map’ of undefined

TrackList.render

C:/Users/User/Documents/CodeAcademy/myfirstreactapp/src/Components/TrackList/TrackList.js:12

   9 | class TrackList extends React.Component {  10 |     render() {  11 |         return (> 12 |             <div className="TrackList">  13 |                 {  14 |                 this.props.tracks.map (track => {  15 |                     return  <Track track={track}

Array.map() is an array method. Be sure that tracks is an array.

Could you please repost your code, properly formatted?

Same problem, here it is:

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

export class TrackList extends React.Component {
  render() {
    return (
      <div className="TrackList">
        {/* <!-- You will add a map method that renders a set of Track components  --> */}
        {/* this.props.tracks = [name, artist, album, id] */}
        {
          this.props.tracks.map(track => {
            return <Track track={track} key={track.id}/>
          })
        }
      </div>
    );
  }
}

Does that even exist?

1 Like

Yes, it exists.

I think the problemn is that this.props.tracks is not an array. However, I commented the line whick is making the error and checked in React Dev Tools. I found that it’s an array.

The ‘Cannot read property map of undefined’ is pretty common and means that tracks is undefined so it is strange that it shows as an array in dev tools. I know two strategies to avoid getting it. The first is to set safe initial data (an empty array). That will not throw the error but simply not render anything. I also usually put a conditional rendering for the map method. If you replace this.props.tracks.map with:
‘tracks && this.props.tracks.map’ then it will only try to do the map if tracks is defined. This will just avoid getting the error msg, you will still have to track down the props to see why the tracks are not passed down to the .map method.

Also keep in mind that your program is using TrackList component in two places: under SearchResults and under Playlist. So check under both those components in dev tools that you have either an array with contents or an empty array for the tracks prop. Could possibly be an issue in TrackList nested under Playlist.

I’m traying to understand that. It turns out that if I comment <Playlist/>, it works

render() {
    return (
      <div>
        <h1>Ja<span className="highlight">mmm</span>ing</h1>
        <div className="App">
          {/* <!-- Add a SearchBar component --> */}
          <SearchBar />
          <div className="App-playlist">
            {/* <!-- Add a SearchResults component --> */}
            <SearchResults searchResults={this.state.searchResults}/>
            {/* <!-- Add a Playlist component --> */}
            {/* <Playlist /> */}
          </div>
        </div>
      </div>
    );
  }

Yep, I think it’s What you said! We should commnet <TrackList /> in Playlist.js and add the props later. Probably it’s the solution.

2 Likes

Thank you all, it looks it worked :slight_smile:

@mike7127143742 Thanks for this tip definitely helped. I was stuck on this exact issue for an hour or 2 and was really lost. In the walkthrough video, they didn’t go over the Playlist component at all, when they talk about passing state from app to SearchResults. Also, the steps never stated to make sure you were passing in the state to the PlayList component that is getting rendered in the app component. Which allows a property to get passed to playlist then down to trackList. So much appreciated for this tip.

1 Like