Okay I have yet another problem that I can’t seem to figure out. Every time I go to change the name of the playlist, I get an error as soon as I either remove or add a letter. It doesn’t seem to matter which. Below is there error I get.
I tried to go back to the lesson as well to research this and I cannot seem to find a solution. Below here is my code that would correspond to this aspect.
Playlist.js
import React from 'react';
import './Playlist.css';
import Tracklist from '../Tracklist/Tracklist';
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 onChange={this.handleNameChange} defaultValue={"New Playlist"} />
<Tracklist tracks={this.props.playlistTracks}
onRemove={this.props.onRemove}
isRemoval={true}
onNameChange={this.updatePlaylistName} />
<button className="Playlist-save">SAVE TO SPOTIFY</button>
</div>
)
}
}
export default Playlist;
App.js
import React from 'react';
import './App.css';
import SearchBar from '../SearchBar/SearchBar';
import SearchResults from '../SearchResults/SearchResults';
import Playlist from '../Playlist/Playlist';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
searchResults: [
{ name: 'name1', artist: 'artist1', album: 'album1', id: 1 }, { name: 'name2', artist: 'artist2', album: 'album2', id: 2 }, { name: 'name3', artist: 'artist3', album: 'album3', id: 3 }],
playlistName: 'My Playlist',
playlistTracks: [{ name: 'playlistName1', artist: 'playlistArtist1', album: 'playlistAlbum1', id: 4 }, { name: 'playlistName2', artist: 'playlistArtist2', album: 'playlistAlbum2', id: 5 }, { name: 'playlistName3', artist: 'playlistArtist3', album: 'playlistAlbum3', id: 6 }]
};
this.addTrack = this.addTrack.bind(this);
this.removeTrack = this.removeTrack.bind(this);
this.updatePlaylistName = this.updatePlaylistName.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});
}
render() {
return (
<div>
<h1>Ja<span className={"highlight"}>mmm</span>ing</h1>
<div className={"App"}>
<SearchBar />
<div className={"App-playlist"}>
<SearchResults searchResults={this.state.searchResults}
onAdd={this.addTrack}/>
<Playlist playlistName={this.state.playlistName}
playlistTracks={this.state.playlistTracks}
onRemove={this.removeTrack}/>
</div>
</div>
</div>
)
}
}
export default App;
What am I doing wrong?