TypeError: Cannot read property 'map' of undefined

Hi Everyone,

I have a problem with the built-in method map() for arrays. The array this.props.tracks seems to be empty thats why the message of TypeError occurs.

return (
            <div className="TrackList">
             { this.props.tracks.map(track => {
                        <Track track = {track}/>
             })
    }    
         </div> 
        )

BUT the array is not empty. This array is set in App, then it is passed down to SearchResults and then down to Tracklist.
Here is App.js: this.state defines an object with property searchResults. searchResults is passed down to SearchResults Component.

import React from 'react';
import './App.css';
import {SearchBar} from '../SearchBar/SearchBar';
import {SearchResults} from '../SearchResults/SearchResults';
import {Playlist} from '../Playlist/Playlist';

class App extends React.Component {
  constructor(props){
    super(props);
    this.state= {searchResults : [
      {name: 'name1', artist: 'artist1', album: 'album1',id: 1 }, 
      {name: 'name2', artist: 'artist2', album: 'album2',id: 2 }, 
      {name: 'name3', artist: 'artist3', album: 'album3',id: 3 }
      ]
    }
  }


  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;

Here is SearchResults.js. The searchResults live on properties and then this.props.searchResults are passed down to a TrackList (tracks= {this.props.searchResults}

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

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

Here is my TrackList: and here the map method does not work. The thing is that this.props.tracks is not empty, but the method map treats this array as empty. this.props.tracks is nothing else than the array of searchResults in the App declared in the constructor as this.state. Where is my mistake. What did I not see? Please helm me

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

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

Thanks for every hint in advance,
Katha

That’s not exactly true. An empty array won’t throw the error. The error is telling you that you are calling .map() on something that doesn’t exist in the current scope (it’s undefined). You’ll need to go back to where you attempted to define it, and make sure it is defined.

1 Like

Hello mindlindner,

Thanks for explanation of scope definition. I went trough my code many times and I dont get it. I defined this array in App component, then I passed it down to SearchResults component and then again down to TrackList component. I checked the spelling and everything seems to be ok.
Do you spontaneously see where the code sucks?

Thanks
Katha