Jammming part 49

Get Help JavaScript
1

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) {
    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: '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)) {
      return;
    }
    tracks.push(track);
    // 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 (
      <div>
       <h1>Ja<span className="highlight">mmm</span>ing</h1>
      <div className="App">
      <SearchBar />
    <div className="App-playlist">
      <SearchResults searchResults={this.state.searchResults}
       onAdd={this.addTrack}  
       />   
       <Playlist playlistName={this.state.playlistName} playlistTracks={this.state.playlistTracks} /> 
    </div>
  </div>
</div>
    )
  }
}

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.

2

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
3

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?

4

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);
5

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
6

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