Jamming - PlaylistName state has changed but old playlist name remains?

Hey there,

Basically, the app is functional, however when I save the playlist named ‘Test Playlist’ to Spotify, I can see in the dev console that the prop changes from ‘Test Playlist’ to ‘New Playlist’ but the ‘Test Playlist’ is still displayed. I think it’s something to do with me confusing the states and props…

Here 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: ‘’,
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(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);
Spotify.savePlaylist(this.state.playlistName, trackUris).then(() => {
this.setState({
playlistName: ‘New Playlist’,
playlistTracks:
})
this.updatePlaylistName(‘New Playlist’);
})
}

search(term){
Spotify.search(term).then(searchResults => {
this.setState({ searchResults: searchResults})
})
}

render() {
return (

Jammming

)} }

export default App;

Here is playlist.js:

import React from ‘react’;
import ‘./Playlist.css’;
import { TrackList } from ‘…/TrackList/TrackList’;

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

    this.handleNameChange = this.handleNameChange.bind(this);
}
handleNameChange(event){
    this.props.onNameChange(event.target.value);
}

render() {
    return(
        <div className="Playlist">
        <input defaultValue={"New Playlist"} onChange={this.handleNameChange}/>
        <TrackList tracks={this.props.playlistTracks} onRemove={this.props.onRemove} isRemoval={true} />
        <button className="Playlist-save" onClick={this.props.onSave}>SAVE TO SPOTIFY</button>
        </div>
    )
}

}

Thanks in advance!

Did you find a solution for this?

I am having the same issue. I can see that the state of the playlistName variable is reset in the local data when a playlist is saved to Spotify, however our code does not appear to reset the display in the DOM at the same time? So the old playlist name is displayed on screen, rather than resetting.

1 Like

Same problem for me… I tried to modified the defaultValue attribute of the input tag from the playlist component from “new playlist” to {this.props.playlistName} but it does not work…