Whenever i use search button i get a white screen and i get an error:
Uncaught TypeError: this.props.tracks is undefined render Tracklist.js:8.
I have checked it multiple times and everything seems to be in order. Can somebody help me?
Tracklist.js
import React from "react";
import './TrackList.css'
import Track from "../Track/Track";
class TrackList extends React.Component{
render(){
return(
<div className="TrackList">
{
this.props.tracks.map(track =>{
return <Track track={track}
key={track.id} onAdd={this.props.onAdd} onRemove={this.props.onRemove} isRemoval={this.props.isRemoval} />
})
}
</div>
)
}
};
export default TrackList;
Search results.js
import React from "react";
import TrackList from "../TrackList/TrackList";
import './SearchResults.css'
class SearchResults extends React.Component{
render(){
return(
<div className="SearchResults">
<h2>Results</h2>
<TrackList tracks={this.props.searchResults} onAdd={this.props.onAdd} isRemoval={false} />
</div>
)
}
};
export default SearchResults;
app.js
import React from 'react'
import ReactDOM from 'react-dom';
import SearchBar from '../SearchBar/SearchBar';
import SearchResults from '../SearchResults/SearchResults'
import Playlist from "../Playlist/Playlist";
import './App.css';
import Spotify from '../../util/Spotify';
class App extends React.Component {
constructor(props){
super(props);
this.state = {
searchResults: [],
playlistName: 'New Playlist - click to change the name ',
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){
if (this.state.playlistTracks.find(savedTrack => savedTrack.id === track.id)) {
return;
} else {
this.state.playlistTracks.push(track)
}
this.setState({playlistTracks: this.state.playlistTracks})
}
removeTrack(track){
this.state.playlistTracks = this.state.playlistTracks.filter(removedTrack => removedTrack.id !== track.id)
this.setState({playlistTracks : this.state.playlistTracks})
}
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 - click to change the name ',
playlistTracks: []
})
})
}
search(searchItem){
Spotify.search(searchItem).then(searchResults => {
this.setState({searchResults: searchResults})
})
}
render(){
return(
<div>
<h1>Ja<span className="highlight">mmm</span>ing</h1>
<div class="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>
)
}
}
export default App;