Jammming TypeError: Cannot read property 'filter' of undefined

Hi everyone! I am on task 62/99 on the jammming project when I got this error:

Code:
(this is from 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: [],
      playListName: '',
      playListTracks: []
    }
    this.addTrack = this.addTrack.bind(this);
    this.removeTrack = this.removeTrack.bind(this);
    this.updatePlayListName = this.updatePlayListName.bind(this);
  }
  addTrack(track) {
    let tracks = this.state.playListTracks;
    if(this.state.playListTracks.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})
  }
  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;

Hello :slight_smile:

You use different formats to reference this variable:

      playListTracks: []
    this.setState({playlistTracks: tracks});
    this.setState({playListTracks: tracks})

Do you see? Sometimes l is captitalized and sometimes it’s not.

1 Like

Hi @factoradic. I solved that error, but now I am getting a new Error:

Code:
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: [],
      playListName: '',
      playListTracks: []
    }
    this.addTrack = this.addTrack.bind(this);
    this.removeTrack = this.removeTrack.bind(this);
    this.updatePlayListName = this.updatePlayListName.bind(this);
  }
  addTrack(track) {
    let tracks = this.state.playListTracks;
    if(this.state.playListTracks.find(savedTrack => 
      savedTrack.id === tracks.id)) {
        return;
    }
    tracks.push(track)
    this.setState({playListTracks: tracks})
  }
  removeTrack(track) {
    let tracks = this.state.playListTracks;
    tracks = tracks.filter(currentTrack => currentTrack.id !== tracks.id);

    this.setState({playListTracks: tracks});
  }
  updatePlayListName(name) {
    this.setState({playListName: name})
  }
  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;

Hello @factoradic … where are you? I replied 4 days ago!!!

The error message indicates that the cause of the error is on line 30:

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

and you know that the error is connected to accessing the property id.

So what now? We have two hypotheses:

  1. currentTrack.id causes the problem;
  2. tracks.id causes the problem.

One of these variables have undefined value, which one? Do you have an idea how to check this? Maybe you could use debugger if you are familiar with developer console or simply use console.log statements to monitor what happens in your application, for example:

removeTrack(track) {
  let tracks = this.state.playListTracks;
  console.log("Tracks:", tracks);
  
  tracks = tracks.filter(currentTrack => {
    console.log("currentTrack:", currentTrack);
    return currentTrack.id !== tracks.id
  });

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

never mind @factoradic I’m done with the Jammming project

1 Like