Jammming currentTrack & savedTrack undefined?

Get Help React.js
#1

I’m confused as to why this is an error here I’m sorry. Please can someone have a look? My app.js code is below, thanks.

image
image2294×278 32 KB

import React from ‘react’;
import ‘./App.css’;
import SearchBar from ‘…/SearchBar/SearchBar’;
import SearchResults from ‘…/SearchResults/SearchResults’;
import Playlist from ‘…/Playlist/Playlist’;

class App extends React.Component() {
constructor(props){
super(props);
this.state = {
SearchResults: [{ name: ‘name1’, artist: ‘artist1’, album: ‘album1’, id: 1},
{name: ‘name2’, artist: ‘artist2’, album: ‘album2’, id: 2}, {name: ‘name3’, artist: ‘artist3’, album: ‘album3’, id: 3}],
playlistName: ‘Ma 15th bday’,
playlistTracks: [{ name: ‘playlistName1’, artist: ‘playlistArtist1’, album: ‘playlistAlbum1’, id: 4}, {name: ‘playlistName2’, artist: ‘playlistArtist2’, album: ‘playlistAlbum2’, id: 5}, {name: ‘playlistName3’, artist: ‘playlistArtist3’, album: ‘playlistAlbum3’, id: 6}]
}
this.addTrack = this.addTrack.bind(this);
this.removeTrack = this.removeTrack.bind(this);
this.updatePlaylistName = this.updatePlaylistName.bind(this);
this.savePlaylist = this.savePlaylist.bind(this);
this.search = this.search.bind(this);
}
addTrack(track){
let tracks = this.state.playlistTracks;
if (tracks.find(savedTrack => savedTrack.id === track.id)) {
return;
}

tracks.push(track);
this.setState({ playlistTracks: tracks });
}

removeTrack(track){
let tracks = this.state.playlistTracks;
tracks = tracks.filter(currentTrack >= currentTrack.id !== savedTrack.id)
this.setState({ playlistTracks: tracks });
}

updatePlaylistName(name){
this.setState({ playlistName: name });
}

savePlaylist(){
let trackUris = this.state.playlistTracks.map(track => track.uri);
}

search(term){
console.log(term);

}

render() {
return (

Jammming

) } }

export default App;

#2

Hi Ben,

it’s a bit difficult to read your code because it is not formatted (You can mark your code and click on the </> button or wrap your code in three backticks each).

One thing I noticed – in case you haven’t found out yourself in the meantime:
The error message states that currentTrack cannot be found. One line where that occurs is here:

I’m sure you see the error once this line is isolated.

I hope it helps. If you’re still stuck, post the corrected code according to this guideline.

#3

Thanks, but where am I supposed to declare ‘currentTrack’ before filtering the playlist tracks as stated in that error message?

#4

Within the filter method, you can name the parameter for the items whatever you like. You do not need to declare them anywhere unless you use the same variable name anywhere else. But I did not see that. But instead of an arrow for the callback you used a comparative operator: >=. It should read:

tracks = tracks.filter(currentTrack => currentTrack.id !== savedTrack.id)

Also, the parameter in your function removeTrack is called track.
I wonder if you want to filter the tracks for the id of the argument passed to that function rather than savedTrack.id?

1 Like
#5

Well aren’t I a blind one for not seeing the comparison operator as opposed to the function :man_facepalming: thanks. I’ll make the appropriate changes when I get back, and then I’ll see where we are. I’ll also have to re-investigate the savedTrack.id, but as far as I can remember without looking, it was relevant in the sense of both removing the appropriate track from a playlist, and ensuring that that tracks spotifyID no longer finds its way into that playlist, if that makes sense?

#6

removeTrack is only supposed to remove a single track from the playlist.
For that purpose you are supposed to pass the function as props all the way down to the Track component. In the Track component you will render a button with a click event that will call the function with the current track as an argument. That track should then be filtered out.