I am trying to render multiple playlists I have created however I can only get one playlist at a time to show. I'm wondering how I can change my code to render ALL playlists instead of one playlist.
getMyPlaylists(){
spotifyApi.getUserPlaylists()
.then((response) => {
this.setState({
myPlaylists: {
playlists: response.items[0].name, //displays first playlist only
}
});
})
}
render() {
return (
<div>
My Playlists: { this.state.myPlaylists.playlists }
</div>
);
}
}
export default App;
You should change your getMyPlaylists function with this:
getMyPlaylists(){
spotifyApi.getUserPlaylists()
.then((response) => {
this.setState({
myPlaylists: {
playlists: response.items
}
});
})
}
and you should loop over items in render like this:
{this.state.myPlaylists.playlists.map((playlist) => {
return (
<div>
{playlist.name}
</div>
)
})}