Hi, I am lookig for help on an error that is thrown after completing step 47 on the Jammming project. I double checked the walkthrough video, but cant seem to understand why I get the error: Uncaught TypeError: this.props.onAdd is not a function.
This happens when I try to add a track to the playlist. The problem seems to be on the track component file at line 21,
addTrack() {
console.log(this.props.track);
this.props.onAdd(this.props.track);
}
I did a console.log to see if it fetches the track, which it does (screenshot object)…but can not be added.
Please help, any one out there.
very grateful for your help.
import React from 'react';
import './App.css';
import SearchBar from '../SearchBar/SearchBar.js'
import SearchResults from '../SearchResults/SearchResults.js'
import Playlist from '../Playlist/Playlist.js';
class App extends React.Component {
constructor(props){
super(props);
this.state = {searchResults: [
{
name: "Estilo Bajo",
artist: "Estilo Bajo",
album: "Son del Hipogeo",
id: 1,
},
{
name: "Ettnnia",
artist: "La Ettnnia",
album: "Ataque",
id: 2,
},
{
name: "Asilo 38",
artist: "Asilo 38",
album: "La hoguera",
id: 3,
},
{
name: "Tres Coronas",
artist: "Tres Coronas",
album: "Brooklyn",
id: 4,
},
],
playlistName :'Nanos Playlist',
playlistTracks: [{
name: "Tres Coronas",
artist: "Tres Coronas ft Zebra",
album: "Soacha",
id: 5
},
{
name: "Ettnnia",
artist: "La Ettnnia",
album: "Ataque Metano",
id: 6,
},
{
name: "Artefacto",
artist: "Artefacto",
album: "Asi es que!",
id: 7,
}]
};
this.addTrack = this.addTrack.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} );
}
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} />
{/* <!-- Add playlist component -- > */}
<Playlist playlistName= {this.state.playlistName}
playlistTracks= {this.state.playlistTracks} />
</div>
</div>
</div>
);
}
}
export default App;
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;
import React from 'react';
import Track from '../Track/Track.js';
import './TrackList.css';
class TrackList extends React.Component {
render() {
return (
<div className="TrackList">
{/* <!-- You will add a map method that renders a set of Track components --> */}
{
this.props.tracks.map(track => {
return <Track track={track}
key={track.id}
onnAdd = {this.props.onAdd} />
}
)
}
</div>
);
}
}
export default TrackList;
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() {
console.log(this.props.track);
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;
