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.

#7

Sorry for the late response, and sorry if I’m going adrift here, but isn’t that why savedTrack.id is appropriate, as opposed to track.id? As track.id on its own is just the default id number for a song in the Spotify library, and the removeTrack method (as a final step) checks that the chosen track to remove, no longer finds its way into the playlist?

Anyway. I made the changes as appropriate, and I now have this; I have no idea how this error would have come about to be honest:

image
image1160×219 24.8 KB

#8

track is the name of the parameter in your function. That means that track.id is the id of the specific track you just passed to the function as an argument when you click the - button in your playlist next to the track you want to remove from the playlist.

Once you click the + button in the list with the search results next to the track you just removed from the playlist, it finds its way back to the playlist. At least it should.

What do you expect savedTrack.id to be? So far it is just the name of the parameter in your function addTrack and not available as a variable in your class.

When you extend a class it is not a function call. You need to remove the parenthesis.

#9

Thanks. Sorry I’m still learning React, still getting to grips with it. I am now presented with the error as per the image:

image
image2038×336 44.5 KB

Going back slightly and also going slightly off topic, would it be worth creating either a method or a function called savedTrack, for it to perform what it says on the tin?

Anyway, here is my code now for both App.js as well as TrackList.js respectively, to see what can be done about my problem. Thanks.

App.js:

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 !== track.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;

TrackList.js

import React from ‘react’;
import ‘./TrackList.css’;
import Track from ‘…/Track/Track’;

class TrackList extends React.Component {
render() {
return(

<div className="TrackList" { 
this.props.tracks.map(track => {
	return <Track track={track} key={track.id} onRemove={this.props.onRemove} isRemoval={true} />
})
  </div>
})
}

}

export default TrackList;

#10

Also, sorry for the late reply again, I have had a hectic past week!

#11

Hi Ben,
no need to excuse for a late response. I’m in no hurry :slight_smile: But my motivation to work my way through many lines of unformatted code is a little low (please see my previous posts about how to format code in posts properly), so I’ll just refer to the error message and your question.

According to the error message, you return your Track components inside the div tag itself (missing ‘>’) as if you were passing props. That produces a syntax error.

I don’t understand why you think you might need another function for savedTracks (you’ll need a method to save the Playlist, if that’s what you mean?). So I’m a little uncertain if you have a clear picture of the intended functionality of the App and/or the purpose of the addTrack and removeTrack functions:

You have a list on the left with your search results. Each track on that list should come with a button with a plus sign. When you click on that, the track shows up in the list on the right with your playlist to be sent to Spotify. As soon as that track is on the playlist, it has a button with a minus sign next to it. And when you click that, the track is filtered out from the playlist. You can repeat that game as often as you like.

When you click on the add button, the specific track with its specific Id is passed to the addTrack method which adds it to the playlist. And when you click on the remove button, the specific track with its specific Id is passed to the removeTrack method and filtered out of the playlist.

#12

Thank you pal, appreciate the help!

Now, I’m by no means an expert with React, but i really don’t understand how ‘tracks’ is undefined here? I even tried it with ‘track’ too, and I get the same error!

Thanks

image
image2208×472 47.4 KB

#13

What do you get if you console.log(this.props)?
And what do you pass as props in Playlist.js and SearchResults.js?

#14

image
image2208×442 48.8 KB

image
image1208×208 30.9 KB

image
image1038×350 28.7 KB

I’m assuming that my use of props here is incorrect?

Also, I hope you don’t mind the screenshots sorry, since it’s a small chunk of code. Thanks

#15

As you can see in your second screenshot the syntax highlighting is a little odd. That indicates that you have a syntax error in your code. If the screenshot shows all of the Tracklist tag you apparently do not close it.

#16

Sorry, this is the whole syntax.

image
image1452×550 42.2 KB

#17

Please can someone help me out with my query from 4 days ago? Thank you.