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

[fadildairo]

I’m currently stuck at task 41 - 51 of the Jamming project, the Error given when I try to remove a track from my playlist is “TypeError: this.setState is not a function”. Also, I can’t update the state of the playlist from the search result component. when clicked it does nothing. I am attaching my written code and the code displayed on my browser.
Here is the App.js code:

import React from 'react';
import './App.css';

import SearchResults from "../SearchResults/SearchResults";
import Playlist from "../Playlist/Playlist";
import SearchBar from "../SearchBar/SearchBar";


class App extends React.Component {
constructor(props) {
  super(props);

  this.state = {
    searchResults: [
      {name: 'Smile', artist: 'Wizkid', album: 'Made in Lagos', id: 1},
      {name: 'Jowo', artist: 'Davido', album: 'ABT', id: 2},
      {name: 'Wetin man go do', artist: 'Burna Boy', album: 'African giant', id: 3}
    ],

    playlistName: "My Playlist",

    playlistTracks: [
      {name: "Bad Commando", artist: "Rema", album: "Bad Commando", id: 4},
      {name: "Lady", artist: "Rema", album: "Bad Commando", id: 5},
      {name: "Spaceship Jocelyn", artist: "Rema", album: "Bad Commando", 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 => 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}
              onRemove={this.removeTrack} />
      </div>
    </div>
  </div>
    );
  };
};

export default App;
 

SearchResults.js code:

`import React from 'react';

import './SearchResults.css';

import TrackList from '../TrackList/TrackList';

class SearchResults extends React.Component {
    render() {
        return (
            <div className="SearchResults" >
                <h2>Results</h2>
                <TrackList tracks={this.props.searchResults} 
                    onAdd={this.props.onAdd}
                    isRemoval={false}/>
            </div>
        )
    }              
}

export default SearchResults;`

Platlist.js code:

import React from 'react';

import './Playlist.css';

import TrackList from '../TrackList/TrackList';

class Playlist extends React.Component {
    render() {
        return(
            <div className="Playlist">
            <input defaultValue={"New Playlist"}/>
            <TrackList tracks={this.props.playlistTracks}
                        onRemove={this.props.onRemove}
                        isRemoval={true}/>
            <button className="Playlist-save">SAVE TO SPOTIFY</button>
            </div>
        );
    }
}

export default Playlist;

Track.js code:

import React from 'react';

import './Track.css';

class Track extends React.Component {
    constructor(props) {
        super(props);

        this.addTrack = this.addTrack.bind(this);
        this.removeTrack = this.removeTrack.bind(this);
    }
    
    renderAction() {
        if (this.props.isRemoval) {
          return <button className="Track-action" onClick={this.removeTrack}>-</button>
      } else {
          return <button className="Track-action" onClick={this.addTrack}>+</button>
      }
    }

    
    
    addTrack() {
        this.props.onAdd(this.props.track);
    }

    removeTrack() {
        this.props.onRemove(this.props.track);
    }

    render() {
        return(
            <div className="Track">
                 <div className="Track-information">
                    <h3>{this.props.track.name}</h3>
                    <p>{this.props.track.artist} | {this.props.track.album}</p>
                </div>
                {this.renderAction()}
            </div>
        );
    }
}

export default Track;

Tracklist.js code;

import './TrackList.css';

import Track from '../Track/Track';

class TrackList extends React.Component {
    render() {     
        const tracks = this.props.tracks;
        let itemsToRender;
        if (tracks) {
            itemsToRender = tracks.map((track) => { 
            return <Track track={track}
                            key={track.id}
                            onAdd={this.props.onAdd}
                            onRemove={this.props.onRemove}
                            isRemoval={this.props.isRemoval} />;
            });
        } 
        
        return <div className="TrackList">{itemsToRender}</div>
    } 
}

export default TrackList;