Jammming part 49

So once again I have come to a grinding halt on the Jammming project https://www.codecademy.com/paths/build-web-apps-with-react/tracks/react-capstone/modules/jammming-capstone/projects/jammming-prj
I am on part 49 and I am getting an error when I use the arrow function below in the remove track method. I tried adding a second pair of brackets () around the first mention of currentTrack.id

import React from 'react';
import './App.css';
import SearchBar from '../SearchBar/SearchBar'
import SearchResults from '../SearchResults/SearchResults'
import Playlist from '../Playlist/Playlist'
// import TrackList from '../TrackList/TrackList';

class App extends React.Component {

  constructor(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: 'My Playlist',
      playlistTracks :[{name: 'playlistName4', artist: 'playlistArtist4', album: 'playlistAlbum4', id: 4},
      {name: 'playlistName5', artist: 'playlistArtist5', album: 'playlistAlbum5', id: 5},
      {name: 'playlistName6', artist: 'playlistArtist6', album: 'playlistAlbum6', id: 6}]

    this.addTrack = this.addTrack.bind(this);
    this.removeTrack = this.removeTrack.bind(this);

  addTrack(track) {
    let tracks = this.state.playlistTracks;
    if (tracks.find(savedTrack => savedTrack.id === track.id)) {
    // this.setState({playlistTracks: tracks});

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

  render() {
    return (
       <h1>Ja<span className="highlight">mmm</span>ing</h1>
      <div className="App">
      <SearchBar />
    <div className="App-playlist">
      <SearchResults searchResults={this.state.searchResults}
       <Playlist playlistName={this.state.playlistName} playlistTracks={this.state.playlistTracks} /> 

export default App;

SyntaxError: /home/elli_t29/jammming/src/Components/App1/App.js: Unexpected token, expected “,” (38:43)
36 | removeTrack(track) {
37 | let tracks = this.state.playlistTracks;

38 | tracks = tracks.filter(currentTrack.id => currentTrack.id !== track.id);
| ^
39 | this.setState({playlistTracks : tracks});
40 | }

on my editor the ^ arrow points to the => arrow function. There is no mention of this issue in the walk through nor this exact problem in the forum posts. Please help.

So this is the line that’s causing the error:

    tracks = tracks.filter(currentTrack.id => currentTrack.id !== track.id);

In a lambda/callback function you define parameter(s) for the arguments that are passed into the function. So accessing the properties of that argument happens on the right side – the function body

prop => prop.key !== object.key

I am sorry I don’t understand what you are suggesting to change. I reversed the order in the function to no avail.

tracks = tracks.filter(track.id => track.id !== currentTrack.id);

But I don’t think thats what you were getting at. I thought the error was being caused by the => arrow function itself?

I mean that you can’t access the property of the parameter and define it at the same time. currentTrack is just the parameter name. You could call it item as well:

tracks = tracks.filter(item => item.id !== track.id);

Both currentTrack and item need to be defined, however in the addTrack method above savedTrack did not. Why is that?

nevermind I have solved it. Thanks once again.

1 Like

The correct term is declared – not defined. Sorry. And yes, you did that also with currentTrack.