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 |

It should be this.props.tracks in TrackList component instead of this.state.tracks` — Code Maniac
– Code Maniac, Commented Jun 18, 2019 at 0:58

Birshan Ramzy Caraccio · Accepted Answer · 2020-05-21 14:56:19Z

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.

answered May 21, 2020 at 14:56

Birshan Ramzy Caraccio

111 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

Umbro · Accepted Answer · 2019-06-18 02:08:21Z

0

Should be:

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

change state to props

answered Jun 18, 2019 at 2:08

Umbro

2,22412 gold badges47 silver badges108 bronze badges

Comments

Adel Helal · Accepted Answer · 2019-06-18 01:24:22Z

0

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.

edited Jun 18, 2019 at 1:24

answered Jun 18, 2019 at 1:05

Adel Helal

6801 gold badge9 silver badges20 bronze badges

3 Comments

Not An Alien Over a year ago

Hi there, despite making the suggested changes I'm facing the same error. Any thoughts?

Adel Helal Over a year ago

This might be a long shot, perhaps remove the spaces between the "=". i.e. <TrackList tracks={this.props.searchResults}/>. If that doesn't solve it work backwards. Try to confirm that the values are indeed being passed down by making searchResults a local variable immediately after the render() and before the return in the App.js. i.e. render() { const searchResults: [...]; return ( And pass it in directly: <SearchResults searchResults={searchResults}/>

Adel Helal Over a year ago

You may also need to consider using the componentDidMount() and componentDidUpdate(prevProps, prevState, snapshot) events in the reactjs pipeline. Usually constructor(props) is used for initializing this.state and the component then gets "mounted" and can set state by calling this.setState(). There is more information here: reactjs.org/docs/react-component.html

Bhawana · Accepted Answer · 2019-06-18 06:35:28Z

0

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}

answered Jun 18, 2019 at 6:35

Bhawana

3801 silver badge6 bronze badges

Comments

Ken Labso · Accepted Answer · 2019-06-18 06:40:38Z

0

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;

answered Jun 18, 2019 at 6:40

Ken Labso

9111 gold badge10 silver badges13 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

Comments

Comments

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related