CODEWITHSUNDEEP
javascriptreactjs
Not An Alien
Not An Alien

Reputation: 95

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

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

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 |

Upvotes: 1

Views: 6615

Answers (5)

Birshan Ramzy Caraccio
Birshan Ramzy Caraccio

Reputation: 11

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.

Upvotes: 1

Ken Labso
Ken Labso

Reputation: 911

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;

Upvotes: 0

Bhawana
Bhawana

Reputation: 380

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}

Upvotes: 0

Umbro
Umbro

Reputation: 2204

Should be:

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

change state to props

Upvotes: 0

Adel Helal
Adel Helal

Reputation: 670

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 (i.e. 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.

Upvotes: 0

Related Questions