TypeError: Cannot read property 'map' of undefined

[khalidabuhijleh99571]

TrackList.js
return (

            <div className="TrackList">

                {

                    this.props.tracks.map(track => {

                        return (

                            <Track

                                track={track}

                                key={track.id}

                                onAdd={this.props.onAdd}

                                isRemoval={this.props.isRemoval}

                                onRemove={this.props.onRemove}

                            />

                        );

                    })

                }

            </div>

        );

App.js
return (

<div>

  <h1>

    <a href="http://loaclhost:3000">

      Musiccophile

  </a>

  </h1>

  <div className="App">

    <SerachBar onSearch={this.search} />

    <div className="App-playlist">

      <SerachResults serachResults={this.state.serachResults} onAdd={this.doThese} />

      <Playlist playlistTracks={this.state.playlistTracks} onNameChange={this.updatePlaylistName} onRemove={this.removetrack} onSave={this.savePlaylist} />

    </div>

  </div>

</div>

 );

PlayList.js
return (

        <div className="Playlist">

            <input onChange={this.handleNameChange} defaultValue={' New Palylist '} />

            <TrackList 

                track={this.props.playlistTracks}

                isRemoval={true}

                onRemove={this.props.onRemove} />

            <button className="Playlist-save" onClick={this.props.onSave}> Save To Spotify </button>

        </div>

    );

SearchResult.js
render() {

    return (

        <div className="SearchResults">

            <h2>Results</h2>

            <TrackList tracks = {this.props.serachResults} onAdd={this.props.onAdd}/>

        </div>

    );

}

[selectall]

Hello, you haven’t posted enough of the code to fully uncover what’s going on, but we can say with certainty that this is the line throwing the error:

@khalidabuhijleh99571

this.props.tracks.map(track => {

What this means is that at some point in your code, this.props.tracks was set to undefined instead of an array (even an empty array would be fine). This could happen because you didn’t pass the property to the component correctly so undefined is the default or the value undefined was sent from another component.

Here’s an example of things going wrong:

PlayList.js

            <TrackList 

                track={this.props.playlistTracks}

SearchResults.js
<TrackList tracks = {this.props.serachResults}

Notice that from PlayList.js, you’re sending it on track, so TrackList would need to use this.props.track instead of this.props.tracks, but from SearchResults.js you’re trying to send it on tracks

Another thing that I’ve noticed is that the spelling of “search” is inconsistent. You wrote that the filename was SeachResults, but then you use a component named SerachResults. Also a SerachBar and this.state.serachResults. You didn’t include the code where you’re setting the initial state, so I don’t know if that’s what you called it or not. As long as you’re consistent, then the spelling won’t really matter, but you should double check that you use it properly in all other areas because it could be another issue.

I hope this helps get you on the right track

[khalidabuhijleh99571]

You are incredible Man ,Thank You
I knew where the problem is , Now , its Working