Jammming TypeError: Cannot read property 'id' of undefined

Hi! I am on the jammming project task 92, but I found this error:

This is my 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';
import Spotify from '../../util/Spotify';

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);
    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 === tracks.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() {
    const trackURIs = this.state.playListTracks.map(track => track.uri);
  }
  search(song) {
    Spotify.search(song).then(searchResults => {
      this.setState({searchResults: searchResults})
    })
  }
  render() {
    return (
      <div>
        <h1>Ja<span className="highlight">mmm</span>ing</h1>
        <div className="App">
            <SearchBar onSearch={this.search()}/>
            <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()}
              onSave={this.savePlayList()}/>
            </div>
          </div>
      </div>
    )
  }
  
}

export default App;

Can somebody help me with this?

I have this same issue but for step 48 - 55 when trying to remove an item on playlist using the “-”

@willpallot Hello I am finished with the JAmming project(from a long time ago!) but I had absolutely no idea what was the problem. I think the ONLY way is to copy-paste the solution code.

Hi,

Just saw this pop up on the latest threads. You’ve obviously finished but perhaps you want to know why it didn’t work?

I think it is because of this

By adding the () you are calling the method. I don’t fully understand why myself yet but I believe we only need to pass reference to the method and not actually call it. It’s not until track.js where we actually call it and pass an argument.

So for the App.js render method you would enter onRemove={this.removeTrack} instead. Same goes for the others; onSearch, onAdd, onNameChange and onSave.