Hey guys,
I’m working on the React Jammming project and I have an issue on the step 34. When I use the .map() to acces the props and return this message “TypeError: Cannot read property ‘map’ of undefined”. I make sure the state from App.js was pass properly by inspecting the code ans it’s all good until I call the .map()…
Here is my code
App.js :
import React from 'react';
import SearchBar from '../SearchBar/SearchBar';
import SearchResults from '../SearchResults/SearchResults';
import Playlist from '../Playlist/Playlist';
import './App.css';
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;
and TrackList.js
import React from 'react';
import Track from '../Track/Track';
import './TrackList.css';
class TrackList extends React.Component {
render() {
return (
<div className="TrackList">
{
this.props.tracks.map(track => {
return <Track track={track}
key={track.id} />
})
}
</div>
)
}
}
export default TrackList;
I don’t understand why I have this message saying “Cannot read property ‘map’ of undefined” so if anyone have the same issue or could help please
In advance thank you!
Ps: I even check the video to see where it could be wrong but still i can’t find it 
