Hi guys ive done the Codeacademy Jamming project with React and I’m having some issues when searching for a song. What I mean is that my API doesn’t receive the term Im passing in and receives ‘undefined’ so it searches for it, as in the screenshot above. As you can see from Dev too.
But sincerely i cant find nothing wrong in the code that involves the passing of the term, so i would really appreciate the help of someone.Im attaching the interested code from:
App.js:
search(term){
Spotify.search(term).then(SearchResults => {
this.setState({SearchResults: SearchResults})
})
}
SearchBar.js
import React from 'react';
import './SearchBar.css'
export class SearchBar extends React.Component{
constructor(props){
super(props);
this.search = this.search.bind(this);
this.handleTermChange = this.handleTermChange.bind(this);
}
search(){
this.props.onSearch(this.state.term);
}
handleTermChange(event){
this.setState({state: event.target.value});
}
render(){
return(
<div className="SearchBar">
<input placeholder="Enter A Song, Album, or Artist" onChange={this.handleTermChange}/>
<button className="SearchButton" onClick={this.search}>SEARCH</button>
</div>
);
}
}
Spotify.js
search(term){
const accessToken = Spotify.getAccessToken();
return fetch(`https://api.spotify.com/v1/search?type=track&q=${term}`,
{headers: {
Authorization: `Bearer ${accessToken}`
}}).then(response => {
return response.json();
}).then(jsonResponse => {
if(!jsonResponse.tracks){
return [];
}
return jsonResponse.tracks.items.map(track => ({
id: track.id,
name: track.name,
artist: "pippi baudo",
album: track.album.name,
uri: track.uri
}));
})
},
Thanks you all