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

[lightroast]

I’m a noob fron-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 statefull 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 , wich 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 this 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 Statefull component, wich 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.