Can't add tracks in jamming project(Step 47)

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!