Problem rendering a react project when using .map() on state and props-CodePudding

I'm a noob front-end student at Codecademy.

I'm currently working on a Codecademy project called Jammming. It's a react app used to fetch data from Spotify and then create playlist for your spotify account. The project has this Walkthrough on YouTube.

I was following the exact instructions of the project but when I .map() some info of the stateful component's state (passed as prop to a child Component called TrackList.js) it stop rendering the full page and became blank, the .map() also invokes a component called <Track>, which is correctly imported. This is the step 34 on the video: the line of code I'm entering is this:

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(
                  (x) => {
                     return <Track track={x} key={x.id} />
                  }
               )}
            </div>
            )
        }
      }

I'm quite stuck int the project since that, not being able to found a solution. When changing the code I realize is not a problem of wrong imported components. Inspecting the project in the localhost it shows me these errors:

Uncaught TypeError: Cannot read properties of undefined (reading 'map')
    at TrackList.render (TrackList.js:7:1)
    at finishClassComponent (react-dom.development.js:19742:1)
    at updateClassComponent (react-dom.development.js:19689:1)
    at beginWork (react-dom.development.js:21602:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4155:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4203:1)
    at invokeGuardedCallback (react-dom.development.js:4268:1)
    at beginWork$1 (react-dom.development.js:27441:1)
    at performUnitOfWork (react-dom.development.js:26548:1)
    at workLoopSync (react-dom.development.js:26457:1)
react-dom.development.js:18678 The above error occurred in the <TrackList> component:

    at TrackList (http://localhost:3000/main.b66511ddd20ba8c5e457.hot-update.js:27:1)
    at div
    at Playlist (http://localhost:3000/static/js/bundle.js:168:1)
    at div
    at div
    at div
    at App (http://localhost:3000/static/js/bundle.js:35:5)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:18678
react-refresh-runtime.development.js:306 Uncaught TypeError: Cannot read properties of undefined (reading 'map')
    at TrackList.render (TrackList.js:7:1)
    at finishClassComponent (react-dom.development.js:19742:1)
    at updateClassComponent (react-dom.development.js:19689:1)
    at beginWork (react-dom.development.js:21602:1)
    at beginWork$1 (react-dom.development.js:27417:1)
    at performUnitOfWork (react-dom.development.js:26548:1)
    at workLoopSync (react-dom.development.js:26457:1)
    at renderRootSync (react-dom.development.js:26425:1)
    at recoverFromConcurrentError (react-dom.development.js:25840:1)
    at performSyncWorkOnRoot (react-dom.development.js:26087:1)

The Stateful component, which state I'm trying to use in the child TrackList component is this:

import './App.css';
import React from "react";
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: [{name1: 'name1', artist1: 'artist1', album1: 'album1', id: 1},
                      {name2: 'name2', artist2: 'artist2', album2: 'album2', id: 2},
                      {name3: 'name3', artist3: 'artist3', album3: '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;

Can anyone tell why when I call the .map() method the project just became a blank page in my browser.

Thank you so much in advance and please forgive my language mistakes. English is not my second language.

CodePudding user response：

It seems tracks you pass to this component is undefined, at least for the first render.

You can avoid the error with this:

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( // Note the ?
                  (x) => {
                     return <Track track={x} key={x.id} />
                  }
               )}
            </div>
            )
        }
      }

Still, you will have to make sure to pass a valid value to the tracks props to that component.