React Jamming - Step 42 TypeError Problem

Hi friends I have been following along the Jamming Project on the React pathway and have encountered a problem that I can’t seem to solve other than commenting out all instances of the addTrack method.

Jamming Problem - screenshot

I followed along the “Get Unstuck” video guide and their code is the same but don’t encounter this problem.

the rest of my App.js Code is as follows:

import ‘./App.css’;

import React from ‘react’;

import SearchBar from ‘…/SearchBar/SearchBar’;

import SearchResults from ‘…/SearchResults/SearchResults’;

import Playlist from ‘…/Playlist/Playlist’;

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: 'playlistName1',

  playlistTracks: [{name: 'nameA', artist: 'artistA', album: 'albumA', id: 4},

  {name: 'nameB', artist: 'artistB', album: 'albumB', id: 5},

  {name: 'nameC', artist: 'artistC', album: 'albumC', id: 6}



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


addTrack(track) {

let tracks = this.state.playlistTracks;

if (tracks.find(savedTrack => === {




  this.setState({playlistTracks: tracks})


render() {



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

this probably happens when you click on the plus sign next to a track in the SearchList? Then the cause may be in your Track Component. If you post it here, please make sure to format your code properly.
I would also suggest that you add a console in your addTrack method that logs the parameter ‘track’.