Trouble with displaying public artist info on NextJS/Typescript App
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Plan
Free/Premium
Country
Device
(iPhone 8, Samsung Galaxy 9, Macbook Pro late 2016)
Operating System
(iOS 10, Android Oreo, Windows 10,etc.)
My Question or Issue
I'm trying to display a list of artist albums by artist ID - with this code snippet & a client ID from the dashboard, I keep getting 401 errors. Not sure what I am doing wrong.
I don't need users to login, just display public information of all albums from an artist ID
import React, { useEffect, useState } from "react";
import SpotifyWebApi from "spotify-web-api-js";
const spotifyApi = new SpotifyWebApi();
interface ArtistInfoProps {
clientId: string;
artistId: string;
}
const ArtistInfo: React.FC<ArtistInfoProps> = ({ clientId, artistId }) => {
const [artist, setArtist] = useState<any>();
useEffect(() => {
// Initialize the Spotify API client with your client ID
spotifyApi.setAccessToken(clientId);
// Fetch artist information
spotifyApi
.getArtist(artistId)
.then((data) => {
setArtist(data);
})
.catch((error) => {
console.error("Error fetching artist information:", error);
});
}, [clientId, artistId]);
console.log(artist);
return (
<div>
{artist && (
<div>
<h2>{artist.name}</h2>
<p>Followers: {artist.followers.total}</p>
{/* Add more artist information as needed */}
</div>
)}
</div>
);
};
export default ArtistInfo;
Labels:
- Labels:
-
"Artists page"
-
React
-
webapi
Reply
Topic Options
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Printer Friendly Page