Jamming: Uncaught TypeError when attempting to access tracks in TrackList.js

Projects Off-platform Practice Projects
1

Hello!

I’m having an issue with the Jamming project. I think I am successfully passing the searchResults array from App.js to SearchResults.js to TrackList.js. In the React dev tools I can see the props loaded when I look at TrackList.js. However, when I attempt to access the tracks with this.props.tracks.map I get a blank screen on the webpage, opening the console I see the following error:

Uncaught TypeError: Cannot read properties of undefined (reading ‘map’)

Here is my code, I appreciate any help you can provide!

App.js

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

export 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;

SearchResults.js

import React from "react";
import './SearchResults.css';
import TrackList from "../Tracklist/TrackList";

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

export default SearchResults;

TrackList.js

import React from "react";
import './TrackList.css';
import Track from "../Track/Track";

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;
2

That’s perfectly normal at that stage, if you carry on the error will be resolved around step 39 :slight_smile:

3

Yep, so I’ll leave this up for anyone else’s future reference. The issue boiled down to having a call to Tracklist that wasn’t commented out AND wasn’t passing the expected props. Once I found that it cleared right up.

To note, it became apparent I had a second call when I saw in the console one call to Tracklist that was valid and another that came back undefined. Console helps!