API only working when I use sample data

[Fenaz]

Hi there,

I am using reactjs and trying get track using the web API but it only works when I use the track id from sample id that I got from 

https://developer.spotify.com/console/get-track/

which is - 11dFghVXANMlKmJXsNCbNl

Whenever I try different IDs like 

5HCyWlXZPP0y6Gqq8TgA20

it doesn't work and says

{
"error": {
"status": 400,
"message": "Only valid bearer authentication supported"
}
}

This is my code :

import React,{useState,useEffect} from "react";
import axios from "axios";


export default function TrackLoader(accessToken){

    //run useeffect with a state called number
    //change the state number in the return value
    //when number changes the useeffect will run again
    const [number, setNumber] = useState(0);
    const [track, setTrack] = useState([]);
    const [arrayOfTracks, setArrayOfTrack] = useState([]);
    const trackIds = ["11dFghVXANMlKmJXsNCbNl","5HCyWlXZPP0y6Gqq8TgA20","11dFghVXANMlKmJXsNCbNl","5SRqt66Dhv4yvKbvGbHQsF","0nbXyq5TXYPCO7pr3N8S4I","1qDrWA6lyx8cLECdZE7TV7"]
    //${trackIds[number]}/
    console.log(accessToken)
    useEffect(() =>{
        async function getData(){
            const response = await axios.get("https://api.spotify.com/v1/tracks/5HCyWlXZPP0y6Gqq8TgA20?market=ES",{
                headers:{
                    Authorization:"Bearer " + accessToken,
                },
            })
            let selectedTrack = response.data
            setTrack(selectedTrack)
            console.log(arrayOfTracks)
        }
        getData();
    },[number]);

    function handleClick(){
        addToList(track)
        setNumber(number+1)
    }

    function addToList(){
        arrayOfTracks.push(track)  
    };

    return(
        <div>
            <button onClick={() => handleClick()}>Number+1</button>
        </div>
    )


}

[Hubo]

Hey @Fenaz, thanks for posting here.

Hope things are well! I'm not 100% familiar with the coding language you're using, but I'll give it a shot if you don't mind.

Could you try to put Authorization between quotation marks, like so:

            const response = await axios.get("https://api.spotify.com/v1/tracks/5HCyWlXZPP0y6Gqq8TgA20?market=ES",{
                headers:{
                    'Authorization': 'Bearer ' + accessToken,
                },
            })

Let me know if that makes sense!

Have a great day,

Hubo