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!