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!