Why is my this.state.searchResults is showinng an array & not object, hence the .map property can not read

App.js
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}
  ]

}
}

render() {
console.log(typeof(this.state.searchResults)) //object;
return (


Jammming


  <SearchBar />
  <div className="App-playlist">
    < SearchResults searchResults= {this.state.searchResults} />
    <Playlist />
    
</div>
); } }

TrackList.js
TypeError: Cannot read property ‘map’ of undefined

TrackList.render

src/Components/TrackList/TrackList.js:20

   return(
 <div class={TrackList}>     
     {this.props.tracks.map(track => {     
  return( 
       <Track tracks= {track} key={track.id} />
</div>

Hello and welcome to the community!

typeof sampleArray will return Object as the type when used on an array. You can read about it here:
MDN typeof

If you want to confirm if something is an array there is an array method called isArray. Hopefully this will help you in the right direction for getting rid of the .map error since that is a method you want to use on an array. Getting the error about .map property cannot read seems to be pretty common in the React projects and does not necessarily relate to that line of code. The solution can be anywhere along the path where the array is generated, stored in state and passed on to the component where error is given.

1 Like

Thanks for the answer, I’ll try to make .map work. :innocent: Will look forward if any help needed… :slightly_smiling_face:

1 Like