Jammming Step 55

Web Development Full-Stack
1

I’m stuck here on the Jammming project at step 55. The tracks that are on the playlist side have an onAdd value of undefined, and the ones on the SearchResults side have an onRemove value of undefined, as they should. But when I click on the button, onAdd is the only one ever called. Even when I remove any calls to onAdd, like in the code below, it still calls onAdd, and I can’t figure out why. Obviously, this makes it so the app doesn’t work, but because the playlist side’s onAdd prop is equal to undefined, it throws an error.

import React from "react";
import './Track.css'

export class Track extends React.Component {
    constructor(props) {
        super(props);

        this.addTrack = this.addTrack.bind(this);
        this.removeTrack = this.addTrack.bind(this);
    }
    
    renderAction() {
        if(this.props.isRemoval) 
            return <button className="Track-action" onClick={this.removeTrack}>-</button>
        else 
            return <button className="Track-action" onClick={this.removeTrack}>+</button>
    }

    addTrack() {
        console.log('adding')
        //this.props.onAdd(this.props.track);
    }

    removeTrack() {
        console.log('removing')
        this.props.onRemove(this.props.track);
    }

    render() {
        return (
            <div className="Track">
                <div className="Track-information">
                    <h3>{this.props.track.name}</h3>
                    <p>{this.props.track.artist} | {this.props.track.album}</p>
                </div>
                {this.renderAction()}
            </div>
        )
    }
}

Any help would be greatly appreciated. I’ve watched the tutorial video through several times and it appears that my code is identical.

2

You assign addTrack to this.addTrack as well as this.removeTrack, so it gets called when you click any of the buttons…

2 Likes
3

Thank you so much. You’re an absolute lifesaver. I can’t believe I didn’t see this!

1 Like