Jamming Project Full stack Course

Hey there, I am 95 steps through the jamming project and am stumos by a problem I am having with the search bar. When I type anything into the search bar and try to search nothing pops up on my screen. I opened the network tab on my dev tools and I and seeing a get being sent but nothing being recieved. I am not getting any errors so I am kind of stumped on what my issue even is let alone how to fix it. I will include a link to my github repo that has my code. I would appreciate any help or advice.

You need to set the onClick method for the button to launch the search in the SearchBar.js method.

current:

<button className="SearchButton">SEARCH</button>

Update to:

 <button className="SearchButton" onClick={this.search}>SEARCH</button>
1 Like

I made that change on my local copy and forgot to update my github. That was an issue orignally though so I appreciate it.

According to the console log, an error is thrown in your Spotify.js code. You are missing the ‘s’ in the json for the track property ‘artists’. The below should fix it.

       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: track.artists[0].name,
          album: track.album.name,
          uri: track.uri,
        }));
      });

You’re right that fixed it! Thank you so much. When you say you used console log to find that how was that accomplished if you don’t mind me asking. I’d love a new error diagnosis tool I’m not currently using.

It is the Console tab on your Dev Tools. Not sure what browser you are using, but this is the error that was logged to the console for your issue. Notice that it tells you what file and the line number. Spotify.js line 44. This isn’t always as clear as this instance, but it often can help you track down assignment issues or at least point you in the right direction.
image