Hi everybody!
I am currently working on the jammming practice project, where you create a webapp with React.js and the spotify API to make playlists and save them to your account. I am almost done but for one little detail that for the life of me I can’t seem to fix.
When I save the playlist, I want the playlist title to reset to ‘New Playlist’, but it won’t. I am using setState to do this, and the weird thing is that I am also using setState to return an empty array for the actual songs in the playlists, and they reset just fine.
A summarized version of the code, including the savePlaylist function is this:
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);
}
savePlaylist() {
const trackURIs = [];
this.state.playlistTracks.forEach(track => {
let trackURI;
trackURI = `spotify:track:${track.id}`;
trackURIs.push(trackURI);
});
Spotify.savePlaylist(this.state.playlistName, trackURIs).then(() => {
this.updatePlaylistName('New Playlist');
this.setState({
playlistTracks: [],
playlistName: 'New Playlist'
})
})
}
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>
)
}
}
Any help is welcome!