Hi everyone, as I have completed all the steps up to 95 (except the steps for deployment) but the function didn’t work as expected.
The search results return undefined name and album!?
My source code:
From Spotify.js
async search(term) {
const accessToken = Spotify.getAccessToken();
const response = await fetch(`https://api.spotify.com/v1/search?type=track&q=${this.term}`, {
headers: { Authorization: `Bearer ${accessToken}` }
});
const jsonResponse = await response.json();
if (!jsonResponse.tracks) {
return [];
}
return jsonResponse.tracks.items.map(track => ({
id: track.id,
name: track.name,
artist: track.artists[0].name,
album: track.album.name,
uri: track.uri
}));
},
From SearchBar.js
export class SearchBar extends React.Component {
constructor(props) {
super(props);
this.state = {term: ‘’}
this.search = this.search.bind(this);
this.handleTermChange = this.handleTermChange.bind(this);
}
search() {
this.props.onSearch(this.state.term)
}
handleTermChange(e) {
this.setState({term: e.target.value})
}
render() {
return (
<div className="SearchBar">
<input onChange={this.handleTermChange} placeholder="Enter A Song, Album, or Artist" />
<button className="SearchButton" onClick={this.search}>SEARCH</button>
</div>
)
}
}
From App.js
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
searchResults: [],
playlistName: 'My Playlist',
playlistTrack: []
};
this.search = this.search.bind(this);
}
search(term) {
Spotify.search(term).then(searchResults => {
this.setState({searchResults: searchResults});
})
}
If anyone had encountered and solved the same issue please share your solution.
Thank you very much!
