Axios then function is returning undefined on console.log of token

Question

The code is working perfectly if the API link to get the track details is used like 'https://api.spotify.com/v1/tracks/3LgWsmilsrWXiPYQFRD0T7'.

But if we start giving dynamic link like 'https://api.spotify.com/v1/tracks/'+id using useParams to get the id from the url then the status I'm getting is 401 status.

const Spotify = (props) => {
    
    const Params = useParams();
    const {id} = Params;

    const classes = useStyles();
    
    const spotify = Credentials();
    const [token, setToken] = useState();
    const [image, setImage] = useState();
    const [name, setName] = useState();
    const [artists, setArtists] = useState();

    useEffect(() => {
        
        axios('https://accounts.spotify.com/api/token', {
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'Authorization': 'Basic ' + btoa(spotify.ClientId + ':' + spotify.ClientSecret)
            },
            data: 'grant_type=client_credentials',
            method: 'POST'
        })
            .then(tokenResponse => {
                
                console.log(tokenResponse.data)
                const res = tokenResponse.data.access_token;
                setToken(res)                
                console.log(token)
                const url = 'https://api.spotify.com/v1/tracks/'+id;
                axios(url,{
                    method: 'GET',
                    headers: { 'Authorization': 'Bearer ' + token }
                }).then(dat => {

                    console.log(token)
                    
                    const Name = dat.data.name;
                    setName(Name);
                    const image = dat.data.album.images[0].url;
                    setImage(image);
                    const artist = dat.data.artists;
                    var artiststring = '';
                    artist && artist.map((art)=>{
                        const {name,id} = art;
                        artiststring += name+', '; 
                    })
                    const editedartist = artiststring.slice(0,-2);
                    setArtists(editedartist)
                    console.log(artiststring)
                    console.log(dat.data.artists)
                })
            })


        return () => {
        }
    }, [Params,spotify.ClientSecret,spotify.ClientId])

    return (

        <div className={classes.root}>
            <Grid container spacing={3}>
                <Grid item xs={4}>
                    <img src={image} className={classes.customizeImage} />
                </Grid>
                <Grid item xs={8} className={classes.customizeDetails}>
                    <Grid container>
                        <Grid item xs={12}>{name}</Grid>
                        <Grid item xs={12}>
                            <div style={{fontSize: '13px',color: 'inherit'}}>{artists}</div>                            
                        </Grid>
                    </Grid>
                </Grid>
            </Grid>

        </div>
    )
}

export default Spotify;```

Answer 1

Maybe try to call your url like this:

const url = `https://api.spotify.com/v1/tracks/${id}`;

also create a console.log(id) before the call to guarantee that the id is available.