How to resolve " Cannot read property 'map' of undefined" error in React Js

Question

I'm following a React JS tutorial and I'm attempting to pass props from one component to another in order to render a list of tracks. I've looked at few threads with similar issues but none of the suggestions have resolved my issue and I'm at a loss. I suspect the issue has something to do with how my initial state is set.

I've attempted the following.

Cannot read property 'map' of undefined REACT

• Changing 'this.props' to 'this.state' and vise versa on receiving components as recommended above but this does not resolve the issue and just returns 'cannot read property tracks of null'

This is my App.js where initial state is defined and passed to the search results component

  constructor(props) {
    super(props);

    this.state = {
      searchResults: [
        {
          name:'test', 
          artist:'test',
          album: 'test',
          id:'2'
        },
        {
          name:'test', 
          artist:'test',
          album: 'test',
          id:'2'
        }
      ]
    }
  }
  render() {
    return (

      <div>
      <h1>Ja<span className="highlight">mmm</span>ing</h1>
      <div className="App">
        <SearchBar/>
        <div className="App-playlist">
          <SearchResults searchResults={this.state.searchResults}/>
          <Playlist/>
        </div>
      </div>
    </div>



  );
  }
}
export default App;

This is where the SearchResults component passes props to TrackList

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

This is where the error seems to be occurring.

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

export default TrackList;

Lastly the track class that should render a track

class Track extends React.Component { 
    render(){

        return( 
                        <div className="Track">
            <div className="Track-information">
                <h3>{this.props.track.name}</h3>
                <p> {this.props.track.artist} | {this.props.track.album}</p>
            </div>
            <button className="Track-action">- + or - will go here --></button>
            </div>
        )
    }
}

export default Track;

the output should be a rendered list of tracks, instead I get 'TypeError: Cannot read property 'map' of undefined.

TypeError: Cannot read property 'map' of undefined TrackList.render src/components/TrackList/TrackList.js:11 8 | class TrackList extends React.Component { 9 | render() { 10 | return ( 11 | 12 | {this.props.tracks.map(track => )} 14 |

Answer 1

Comment out the TrackList component from the PlayList render() method and it should work.

I am doing this same course from codecademy. The reason you still got the error is because in PlayList.js there is a TrackList component being rendered there but without any props. So in the TrackList class, there is no props to map.

Answer 2

You are actually setting the property tracks in the TrackList component here:

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

tracks here is not a state, it is a property of the component (ie props ).
So you may want to change the following line:

{this.state.tracks.map(track => <Track key={track.id}

To:

{this.props.tracks.map(track => <Track key={track.id} 

That should solve your problem.

Answer 3

Should be:

{this.props.tracks.map(track => <Track key={track.id} track={track}  />)}

change state to props

Answer 4

First console this.props.searchResults on SearchResult Component then console this.props.tracks in TrackList Component , then Replace

 {this.state.tracks.map(track => <Track key={track.id} 

To

{this.props.tracks && this.props.tracks.map(track => <Track key={track.id}

Answer 5

In your TrackList component, you should use this.props.tracks.map.... instead of this.state.tracks.map... because you passed the data to this component as a value of tracks prop.

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

export default TrackList;