Jamming Project: step 48 - 55 TypeError: Cannot read property 'id' of undefined

[willpallot]

Hi guys,

I am stuck on Jamming project step 48 - 55 where we are developing the remove playlist item functionality.

link: https://www.codecademy.com/paths/web-development/tracks/front-end-applications-with-react/modules/jammming/projects/jammming-prj

I am getting this error after completing and following up to step 55.

Here is my code

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


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: 'name1', artist: 'artist1', album: 'album1', id: 4 },
        { name: 'name2', artist: 'artist2', album: 'album2', id: 5 },
        { name: 'name3', artist: 'artist3', album: 'album3', id: 6 }
      ]
    };
    this.addTrack = this.addTrack.bind(this);
    this.removeTrack = this.removeTrack.bind(this);
    this.updatePlaylistName = this.updatePlaylistName(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() {
  }

  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}
              onRemove={this.removeTrack}
              onNameChange={this.updatePlaylistName} />
          </div>
        </div>
      </div >
    );
  }
}

export default App;

Full code available here https://github.com/WilliamPallot/jammming

[spacetyrant]

The error is saying that ‘currentTrack’ is null, which by extension means ‘tracks’ don’t contain anything. Since your ‘this.state.playlistTracks’ is defined, if I had to guess, I would say the problem is with your reassignment statement. See if rewriting your method to the following helps:

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

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