I just finished step 47 of the Jammming project and went to test it but clicking the add button does nothing. The relevant code is below and I would appreciate anyone willing to share their knowledge.
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: 'banana',
playlistTracks: [{name: 'playlistName1', artist: 'playlistArtist1', album: 'album1', id: 4 },
{name: 'playlistName2', artist: 'playlistArtist2', album: 'album2', id: 5 },
{name: 'playlistName3', artist: 'playlistArtist3', album: 'album3', id: 6 }
]
}
this.addTrack = this.addTrack.bind(this);
}
addTrack(track) {
let tracks = this.state.playlistTracks;
if(tracks.find(savedTrack => savedTrack.id === track.id)) {
return;
} else {
tracks.push(track);
this.setState = ({playlistTracks: tracks})
}
}
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}/>
</div>
</div>
</div>
)
}
}
export default App;
SearchResults.js:
import React from 'react'
import './SearchResults.css'
import TrackList from '../TrackList/TrackList'
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;
TrackList.js:
import React from 'react'
import './TrackList'
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}/>
})
}
</div>
)
}
}
export default TrackList;
Track.js:
import React from 'react'
import './Track.css'
class Track extends React.Component {
constructor(props) {
super(props);
this.addTrack = this.addTrack.bind(this);
}
renderAction() {
if(this.props.isRemoval) {
return <button className="Track-action">-</button>
} else {
return <button className="Track-action" onClick={this.addTrack}>+</button>
}
}
addTrack() {
this.props.onAdd(this.props.track);
}
render() {
return (
<div className='Track'>
<div className="Track-information">
<h3>{this.props.track.name}</h3>
<p>{this.props.track.artist} | {this.props.track.album}</p>
</div>
{this.renderAction()}
</div>
)
}
}
export default Track;
Thanks in advance!