Jamming/ props/ onRemove: undefined

Jammming

Hey there, I’m stuck at the jammming project part where you should be able to use the (-) button to remove the tracks from the playlist. I have been following the tutorial video and even though I have apparently the same code it doesn’t work on my own project.

as you see the devtools show onRemoval: undefined

If I change isRemoval to “false” on Playlist.js

<TrackList tracks={this.props.playlistTracks}

                   onRemove={this.props.onRemove}

                   isRemoval={false}/>

the + will reapear

Q: what am I doing wrong?

Any help would be really appreciated! I’m moving forward with the Web Development course but would like to see this project to completion.

Greets,

Will

https://github.com/EnvisionXY/Jammming/blob/main/App.js

I have the same problem :rage:

I solved it, but I don’t remember how exactly. I think I found a working code on github. It was a small detail, like a bit of code that I forgot somewhere. Let me know if you need more details

I have just resolved the problem as well.
This is my answer, you have to change TrackList.js and show this:

import React from ‘react’;

import ‘./TrackList.css’;

import Track from ‘…/Track/Track.js’

class TrackList extends React.Component {

render() {

    let trackList;

    if (this.props.isRemoval) {

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

          return <Track 

          key={track.id} 

          track={track}              

          onRemove={this.props.onRemove} 

          isRemoval={this.props.isRemoval} /> 

        })

    } else {

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

            return <Track 

            key={track.id} 

            track={track}

            onAdd={this.props.onAdd}               

            isRemoval={this.props.isRemoval} /> 

        })  

    }

    return (

        <div className="TrackList">               

            { trackList }

        </div>

    )

}

}

export default TrackList;