Jamming Playlist component breaking the TrackList component

So my code is rendering just fine up until step 38. The map function for TrackList’s props is working normally and the track info (name of song, artist and album) is being displayed perfectly.

However, for some strange reason whenever I add the TrackList component, even without any props, to the Playlist JSX, the map function in the TrackList component breaks. Here is the render method on my TrackList Component:

render() {


    return(
      <div className="TrackList">
        {
          this.props.searchResults.map(track => {
            return <Track searchResultInfo={ track } key={ track.id } /> })
        }
      </div>
    )
  }

This is the whole Playlist component:

class Playlist extends React.Component {
  render() {
    return (
      <div className="Playlist">
        <input defaultValue={ 'New Playlist' }/>
        <TrackList />  <------ This is what seems to be breaking the code
        <button className="Playlist-save">SAVE TO SPOTIFY</button>
      </div>
    )
  }
}

I am getting this error message now.

It says error is occurring at the TrackList component but whenever is called from the Playlist JSX.
“The above error occurred in the component:
in TrackList (at Playlist.js:10)”

Whenever I delete the TrackList component from Playlist, the page renders just fine once more. Here is all the code within the App component:

  constructor(props) {
    super(props);

    this.state = {
      searchResults: [
        {name: 'March to the Sea', artist: 'Baroness', album: 'No clue', id: 1},
        {name: 'Prehistoric Dawg', artist: 'Red Fang', album: 'Catdog', id: 2},
        {name: 'Awake', artist: 'Tycho', album: 'Sunrise', id: 3}
      ],
      playlistTracks: [
        {name: 'March to the Sea', artist: 'Baroness', album: 'No clue', id: 1},
        {name: 'Prehistoric Dawg', artist: 'Red Fang', album: 'Catdog', id: 2},
        {name: 'Awake', artist: 'Tycho', album: 'Sunrise', id: 3}
      ],
      playlistName: 'Faya',
    }
  }

  render() {
    return (
      <div>
        <h1>Ja<span className="highlight">mmm</span>ing</h1>
        <div className="App">
          <SearchBar />
          <div className="App-playlist">
            <SearchResults searchResult={ this.state.searchResults } />
            <Playlist playListTrackList={ this.state.playlistTracks }
            playName={ this.state.playlistName } />
          </div>
        </div>
      </div>
    )
  }
}

Please please please let me know if anyone has any idea on how to solve this. I have compared every single detail with the walkthrough and also with the finished project but neither seems to have the answer.

Thanks!!!

So I have since solved the issue by conditionally saving the props array to a variable like this:

    let arr = this.props.searchResults;
    let trackArr;
    if(Array.isArray(arr)) {
      trackArr = arr.map((track) => {
        return <Track searchResultInfo={ track } key={ track.id } /> }
      )
    }

I just added the variable to the JSX and it is working normally.