Jamming project-issue with adding songs to new playlist

Hi everyone!

I a struggling with step 45 - 47(see link: https://www.codecademy.com/paths/web-development/tracks/front-end-applications-with-react/modules/jammming/projects/jammming-prj).

In those steps, I am supposed to make the ‘+’ clickable so songs from results can be added in the new playlist. While I complete the step successfully, the text of the song title and artist disappears when the song is added to the playlist. !

I am including 3 pictures: 2 pics of my code and 1 pic of the outcome so you can understand the issue better.

Thank you in advance,

Eirini :smiley:

I’m not sure if Step 45 is done correctly from the given images. Is the .addTrack() method created in the Track component?

Yes! The .addTrack() method is created in the Track component!

Can you show me the whole Track.js?

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;

Thank you for your reply. I think steps 45-47 are done correctly. Then, if the problem still persists, it may be due to an earlier step. How was the .addTrack() method created in App.js?

This is my 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: 'My Playlist',

  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 === track.id)){

  return;

} 

  tracks.push(tracks);

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

Spotify.savePlaylist(this.state.playlistName, trackUris).then(() => {

this.setState({

  playlistName: 'New Playlist',

  playlistTracks: []

})

})

}

search(term) {

Spotify.search(term).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;

This line may be the cause. What if you change it as follows?

tracks.push(track);

Now I cant see the results of any change I make because it throws another error :
“INVALID_CLIENT: Invalid redirect URI”

so now every time I refresh it shows the above message…

It seems that you are doing steps ahead. I think it’s an error related to Spotify.js. I don’t know much more than that, but when I searched for INVALID_CLIENT in this forum, I found some related topics. One of them is this:

Thank you for giving me the link. I basically finished the Jamming project last night and errors keep showing up. Let’s see if I can fix it now with the new link that you sent me :slight_smile:
Thank you so much!

Hi again! So now I am having way more issues.
I am including pics
How i it possible that there are problems in files I did not even touch? Also, I do not understand what is wrong with the trackList. What the error points out is not very specific

I’m not sure, but it’s probably not a problem with the TrackList component. The this.props.tracks might not have been passed correctly from its upstream (Playlist or SearchResults).

For example, in App.js you are passing this.state.searchResults by SearchResults={this.state.searchResults} (where the first S is uppercase) to SearchResults component:

<SearchResults SearchResults={this.state.searchResults} onAdd={this.addTrack} />

In SearchResults.js, if you passed this to TrackList by tracks={this.props.searchResults} (where s is lowercase) like the following, it is mismatch.

<TrackList tracks={this.props.searchResults} onAdd={this.props.onAdd} isRemoval={false} />

Another thing that might come up is a mismatch between track and tracks.

Aaahh Thanks for this! It worked!