Project Jammming trouble - add track button

Projects
1

Hi,
I’m having trouble figuring out how I can add the ‘Add’ button to add tracks from the search to the custom playlist. When I try to do it, the button doesn’t pass any track data to the function.
What is the correct way to do this? How can I make a button pass the object track data to the function, and ultimately to the playlist state?
Any help is welcome!

2

Hey @tomterveen!

Your code looks very good, the structure is set up nicely.

You just have to pass your addTrack function in App.js all the way down to the track component.

In app.js pass addTrack to SearchResults:

 <SearchResults searchResults={searchResults} addTrack={addTrack}/>

In SearchResults.js pass addTrack to Track.js:

//line 5:
const SearchResults = ({ searchResults, addTrack }) => {

// line 11:
<Track key={result.id} track={result} addTrack={addTrack} />

In track.js you can now use addTrack in your handleClick function:

const Track = ({track, key, addTrack}) => {

    const handleAddClick = (track) => {
        addTrack(track);
    }

    return (
        <>
            <h3>Title: {track.title}</h3>
            <p>Artist: {track.artist} | Album: {track.album}</p>
            <button onClick={addTrack}>Add to playlist</button>
        </>
    )
}
2 Likes
3

Hi @jameskeezer, thanks for your reply and care!

Unfortunately this don’t seem to work. I’ve passed addTrack down to Track.js.
Now when I click add in the searchresults, the ‘Title’, 'artist and ‘album’ tags are added, but without any data. See screenshot on the right side.
Just the empty object keys. This happened before.
I’ve pushed the new version to github.

Any ideas how I get the data in the tracklist?

Scherm­afbeelding 2023-12-13 om 06.49.09
Scherm­afbeelding 2023-12-13 om 06.49.092402×868 136 KB

5

And this sounds like an AI generated answer. You know what: AI answers become more intelligent the more intelligent and detailed your input was. And even then they aren’t always correct. In this case, the question asked to the bot seems to have been rather generic. HTML code with JS assigned to the onclick attribute as a string has little to do with the onClick prop in React.

They do. Look at the mockdata. That’s not the problem.
What’s the purpose of posting generic AI generated answers to the forum without checking its usefulness? It’s wasting server space, the energy for running them and the time of the OP for reading a useless answer.

@tomterveen In your Tack component you are just referencing the handleAddClick function:

<button onClick={handleAddClick}>Add</button>

Your handleAddClick function expects a track object as an argument:

const handleAddClick = (track) => {
        console.log(track);
        addTrack(track);
    }

onClick passes the event object as an argument to the function if you do it this way. But the event object is not your track object.

Either pass the track to the function without calling the function in the onClick prop directly like this:

<button onClick={e => handleAddClick(track)}>Add to playlist</button>

Or remove the parameter ‘track’ from the handleAddClick function. Then it takes the prop ‘track’ from the outer scope.
Since the event object does not have an id, the ‘else’ clause in your addTrack function is executed and the event object is added to the tracklist, I guess. Log the tracklist state to verify.

2 Likes
6

This did the trick and worked! Thank you very much @staledata for replying and explaining it to me! I think this will be most helpful at future projects. I get it now.
Indeed, when I console logged it, I got an event object back. Now I know why.

Thanks!

Also thanks @jameskeezer for replying!

3 Likes