Jammming project step 34

[blog4616083888]

Hi! I’m working on Jammming Project step 34. However, I’m getting this error.

sharing my code as well.

Thanks!

[core2012045423]

Hi @blog4616083888 I think a lot of us received that error message when working through the Jammming project. The link at the bottom is to a thread on here that might help.

<TrackList /> is being rendered in both the <PlayList /> and <SearchResult /> components. In my case, the problem was due to not adding a tracks property to <TrackList /> when it is rendered in both Playlist.js and SearchResults.js files.

Cheers!

Jamming project stuck on exercise 34

Hi, I’m working on the Jammming project. Currently I’m stuck on exercise 34 to do a mapping through the tracks objects and render every track. I’m getting a TypeError: Cannot read property ‘map’ of undefined. I checked the code and everything looks like the code in the support video: class TrackList extends React.Component { render() { return ( <div className="TrackList"> { this.props.tracks.map(track => { return <Track track={track} key={track.id} />;…

[blog4616083888]

Thank you! Will check on this.

[hans5486045012]

Hi there. I have the same problem, but I solved it by doing this -

1. Remove or comment out component in Playlist.js, under render method.

class Playlist extends React.Component {
    
    render () {
        return (
        <div className="Playlist">
            <input defaultValue={"New Playlist"}/>

            REMOVE <TrackList /> here

            <button className="Playlist-save">SAVE TO SPOTIFY</button>
        </div>

        );
    }
}

2. Later, on step 39 you will add this line - <TrackList tracks={ this.props.playlistTracks} />

Hope this will help you.

[pauwou]

Thanks! Your trick helped.

What I find strange though is that in the video, the developer doesn’t seem to run into this issue.