Create a Playlist App With the Spotify API (Part One): Search Not Working

I’m currently stuck on step 94 of the Create a Playlist App With the Spotify API (Part One) project.

When I enter something into the search field and click the search button, nothing happens. When I check the console, I don’t see any errors to help indicate where the code isn’t working.

  • I’ve gone over the walkthrough video step by step. So far, my code seems identical to the instructor’s code, as far as the App.js and Spotify.js components go. I’m assuming the issue is there, but I could be wrong.
  • I’ve tried different browsers.
  • I’ve tried it on different computers in different buildings, just to make sure it isn’t machine or network related.

No luck.

Here’s the link to the code on Github. I’ve scrubbed the clientId for security purposes.

For convenience, here’s the Spotify.js code

const clientId = ""; //removed for security; const redirectUri = "http://localhost:3000/"; let accessToken; const Spotify = { getAccessToken() { if (accessToken) { return accessToken; } //check for an access token match const accessTokenMatch = window.location.href.match(/access_token=([^&]*)/); const expiresInMatch = window.location.href.match(/expires_in=([^&]*)/); if (accessTokenMatch && expiresInMatch) { accessToken = accessTokenMatch[1]; const expiresIn = Number(expiresInMatch[1]); window.setTimeout(() => (accessToken = ""), expiresIn * 1000); window.history.pushState("Access Token", null, "/"); //code is used to help you wipe the access token and URL parameters return accessToken; } else { const accessUrl = `${clientId}&response_type=token&scope=playlist-modify-public&redirect_uri=${redirectUri}`; window.location = accessUrl; } }, search(term) { const accessToken = Spotify.getAccessToken(); return fetch(`${term}`, { headers: { Authorization: `Bearer ${accessToken}` }, }) .then((response) => { return response.json(); }) .then((jsonResponse) => { if (!jsonResponse.tracks) { return []; } return => ({ id:, name:, artist: track.artists[0].name, album:, uri: track.uri, })); }); }, savePlaylist(name, trackUris) { if (!name || !trackUris.length) { return; } const accessToken = Spotify.getAccessToken(); const headers = { Authorization: `Bearer ${accessToken}` }; let userId; return fetch("", { headers: headers }) .then((response) => response.json()) .then((jsonResponse) => { userId =; return fetch(`${userId}/playlists`, { headers: headers, method: "POST", body: JSON.stringify({ name: name }), }) .then((response) => response.json()) .then((jsonResponse) => { const playlistId =; return fetch( `${userId}/playlists/${playlistId}/tracks`, { headers: headers, method: "POST", body: JSON.stringify({ uris: trackUris }), } ); }); }); }, }; export default Spotify;

And here’s the App.js code.

import React from "react"; import "./App.css"; import SearchBar from "../SearchBar/SearchBar"; import SearchResults from "../SearchResults/SearchResults"; import Playlist from "../Playlist/Playlist"; import Spotify from "../../util/Spotify"; class App extends React.Component { constructor(props) { super(props); this.state = { searchResults: [], playlistName: "My Playlist", playlistTracks: [], }; this.addTrack = this.addTrack.bind(this); this.removeTrack = this.removeTrack.bind(this); this.updatePlaylistName = this.updatePlaylistName.bind(this); this.savePlaylist = this.savePlaylist.bind(this); =; } savePlaylist() { const trackUris = => track.uri); Spotify.savePlaylist(this.state.playlistName, trackUris).then(() => { this.setState({ playlistName: "New Playlist", playlistTracks: [] }); }); } search(term) { console.log(term); => { this.setState({ searchResults: searchResults }); }); } addTrack(track) { let tracks = this.state.playlistTracks; if (tracks.find((savedTrack) => === { return; } tracks.push(track); this.setState({ playlistTracks: tracks }); } removeTrack(track) { let tracks = this.state.playlistTracks; tracks = tracks.filter((currentTrack) => !==; this.setState({ playlistTracks: tracks }); } updatePlaylistName(name) { this.setState({ playlistName: name }); } render() { return ( <div> <h1> Ja<span className="highlight">mmm</span>ing </h1> <div className="App"> <SearchBar onSearch={} /> <div className="App-playlist"> <SearchResults searchResults={this.state.searchResults} onAdd={this.addTrack} /> <Playlist playlistName={this.state.playlistName} playlistTracks={this.state.playlistTracks} onRemove={this.removeTrack} onNameChange={this.updatePlaylistName} onSave={this.savePlaylist} /> </div> </div> </div> ); } } export default App;

Appreciate any help I can get. Thanks!

Hi I had the same issue, I was missing an onClick Property on the searchBar.js button with the value of the search method.

1 Like

That did it!!! I can’t thank you enough @aherna100! I was nearly going to give up and search Github for completed projects. Thank you for that.

Thank you for discovering the missing onClick property but I had to fix another bug in Spotify.js/search method:

the return function only works removing [0] and artist name, pls see below:
return =>({
artist: track.artist,
uri: track.uri

Thanks for chiming in @script0526291217 !

Strangely, both versions work for me.

Although, I did come across a bug I didn’t see originally. When I enter a search term and click search, it doesn’t work at first. But subsequent searching will work fine afterwards, even after refreshing the page. I tried it with my original code as well as your suggestion. Same result. Different browsers, same result.

It sort of works, so I’m taking it as a win for now and moving on. I’ll revisit once again once I get a bit better with React from other lessons.

Again, much thanks!