Jammming project search not working

So I have almost finished Jammming project. https://www.codecademy.com/paths/build-web-apps-with-react/tracks/react-capstone/modules/jammming-capstone/projects/jammming-prj I have gotten up to step 95. When I click on the search button I get the following result.

I have read that it may be due to my not being the US and that there are several other API’s I can use. However I am unsure what to change in my Spofity.js file

let accessToken;
const clientID = '';
const redirectURI = 'https://localhost:3001/';

const Spotify = {
    getAccessToken() {
        if (accessToken) {
            return accessToken;

        // check for access token
        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]);
            // This clears the parameters, allowing us to grab a new
            // access token when it expires.
            window.setTimeout(() => accessToken = '', expiresIn * 1000);
            window.history.pushState('Access Token', null, '/');
            return accessToken;
        } else {
            const accessUrls = `https://accounts.spotify.com/authorize?client_id=${clientID}&response_type=token&scope=playlist-modify-public&redirect_uri=${redirectURI}`;
            window.location = accessUrls;

    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.artist[0].name,
                album: track.album.name,
                uri: track.uri

    savePlaylist(name, trackUris){
        if (!name || !trackUris.length) {
        const accessToken = Spotify.getAccessToken();
        const headers = {
            Authorization: `Bearer ${accessToken}`
        let userId;

        return fetch('https://api.spotify.com/v1/me', {headers: headers}
        ).then(response => response.json()
        ).then(jsonResponse => {
            userId = jsonResponse.id;
            return fetch(`https://api.spotify.com/v1/users/{user_id}/playlists`,
                headers: headers,
                method: 'POST',
                body: JSON.stringify({name: name})
            }).then(response => response.json()
            ).then(jsonResponse => {
                const playlistId = jsonResponse.id;
                return fetch(`https://api.spotify.com/v1/users/{user_id}/playlists/{playlist_id}/tracks`,
                    headers: headers,
                    method: 'POST',
                    body: JSON.stringify({uris: trackUris})

export default Spotify;

I know that I need to change the urls but to what I am not sure. I have set up an account with deezer. Does anyone have experience of using deezer or any other API for the Jammming project? Can you help? Or is there a way I can get it working with Spotify? Also unable to access my dashboard on Spotify.

In the Spotify developer account you need to set the base URL to your localhost address. Then it will work – also in Europe.
Go to settings and enter your local host address in Redirect URIs

I couldn’t access my dashboard in google Chrome either – worked with Safari.

1 Like

Ok one problem solved another pops up. Now after clicking the search button I get the following

Did you edit https://localhost:3000/ or http://localhost:3000/?
The latter is correct.

I changed it to http and now I am getting the original problem.

Because now the URLs don’t match anymore:

const redirectURI = 'https://localhost:3001/';

You need to change that in your Spotify.js, too.

Feel a bit silly about that one. Now the page does nothing when the search button is clicked. I added an onClick to the button like so. onClick=${this.props.search} also tries it without the props.

search(term) {
  const accessToken = Spotify.getAccessToken();

Would you get a result for both logs, just one – or none?

I added the two console.log statements and this is what I got in the console.

Is that what you meant?

The first is what you get for console.log(term)? Do you see the problem then? Term is not supposed to be an event.

is the problem in SearchBar.js ?

    search() {

    handleTermChange(event) {
        this.setState({term : event.target.value});

in here somewhere?

Find out:

    search() {

What do you get?

when I added that code I got nothing in the console, but when I added the code to the console I got

am I getting what you are asking me to do?

That console is in the SearchBar component? So obviously, you’ve got a problem in that component since this.state is undefined. What does the whole component look like?

Having problem 403 again. So here is the code on GitHub GitHub - ETurner-Bisset/jammming

Where are you calling this.search?

I think I get what you are saying. I add this.search to the input and now I get the following error

react_devtools_backend.js:2655 Warning: Unknown event handler property onSearch. It will be ignored.
at button
at div
at SearchBar (http://localhost:3001/main.081f09f1f00c36fb9a73.hot-update.js:27:5)
at div
at div
at App (http://localhost:3001/static/js/bundle.js:37:5)
Did I put it in the right place?

Where are you adding that exactly? Try posting that again or describe exactly which component and element

OK. In my render method in SearchBar, to the button section I added this.search. Sorry I can’t decribe it any better. Any code I type in here gets me the 403 error.
When I search for anything this it what happens in the console.

Your console logs a valid term now. The access token looks correct (you better blur that and remove the console thats logs the access token now since it seems to reurn a valid result).
What happens on line 45 in your code of Spotify.js?