Each child in a list should have a unique "key" prop Error in React

Question

Hi I am currently working with Spotify API with Spring Boot as the backend and React for the front end. I was able to retrieve a user's favorite artist using the API in a json format but as I am not familiar with React, I am currently having problems displaying the data.

The json data that I have retrieved looks something like this.

[{"externalUrls":{"externalUrls":{"spotify":"https://open.spotify.com/artist/3dz0NnIZhtKKeXZxLOxCam"}},"followers":{"href":null,"total":929384},"genres":["complextro","edm","progressive electro house"],"href":"https://api.spotify.com/v1/artists/3dz0NnIZhtKKeXZxLOxCam","id":"3dz0NnIZhtKKeXZxLOxCam","images":[{"height":640,"url":"https://i.scdn.co/image/ab6761610000e5eb1804f56bdcb9322c5f3f8f21","width":640},{"height":320,"url":"https://i.scdn.co/image/ab676161000051741804f56bdcb9322c5f3f8f21","width":320},{"height":160,"url":"https://i.scdn.co/image/ab6761610000f1781804f56bdcb9322c5f3f8f21","width":160}],"name":"Porter Robinson","popularity":68,"type":"ARTIST","uri":"spotify:artist:3dz0NnIZhtKKeXZxLOxCam"},{"externalUrls":{"externalUrls":{"spotify":"https://open.spotify.com/artist/6M2wZ9GZgrQXHCFfjv46we"}},"followers":{"href":null,"total":27618208},"genres":["dance pop","pop","uk pop"],"href":"https://api.spotify.com/v1/artists/6M2wZ9GZgrQXHCFfjv46we","id":"6M2wZ9GZgrQXHCFfjv46we","images":[{"height":640,"url":"https://i.scdn.co/image/ab6761610000e5ebd42a27db3286b58553da8858","width":640},{"height":320,"url":"https://i.scdn.co/image/ab67616100005174d42a27db3286b58553da8858","width":320},{"height":160,"url":"https://i.scdn.co/image/ab6761610000f178d42a27db3286b58553da8858","width":160}],"name":"Dua Lipa","popularity":94,"type":"ARTIST","uri":"spotify:artist:6M2wZ9GZgrQXHCFfjv46we"}]

I am hoping to display this with React but seem to run into an error that reads "Warning: Each child in a list should have a unique "key" prop."

My 'ListArtistComponent.jsx' file in my React application looks something like this.

    class ListArtistComponent extends Component{
    constructor(props) {
        super(props);
        this.state = {
            artist: []

        }
    }
    componentDidMount(){
        ArtistService.getArtist().then((res) => {
            this.setState({ artist: Array.from(res.data)});
        });
    }

    render() {
        return(
            <div>
                <h2 className="text-center">Artist List</h2>
                <div className="row">
                    <table className="table table-striped table-bordered">

                        <thead>
                            <tr>
                                <th>Artist Name</th>
                                <th>Artist Popularity</th>
                            </tr>
                        </thead>
                        <tbody>
                            {
                                this.state.artist.map(
                                    artist =>
                                        <tr key = {artist.id}>
                                            <td> {artist.name} </td>
                                            <td> {artist.popularity} </td>
                                        </tr>
                                )
                            }
                        </tbody>

                    </table>
                </div>
            </div>
        )
    }
}
export default ListArtistComponent;

And my ArtistService looks something like this

    class ArtistService {

    getArtist(){
        return axios.get("http://localhost:8080/api/topartist")
    }
}
export default new ArtistService()

I am guessing that a problem occurred when setting the 'id'(in the given json "3dz0NnIZhtKKeXZxLOxCam" and "6M2wZ9GZgrQXHCFfjv46we" respectively) value as the key, it would be appreciated if I could know what seems to be causing the problem and a solution for it. Thank you in advance!!

Does this answer your question? [Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of \`ListView\`](https://stackoverflow.com/questions/34576332/warning-each-child-in-an-array-or-iterator-should-have-a-unique-key-prop-che) — ray, Sep 02 '21 at 04:35
I don't see any problem with your code, could you log `this.state.artist` before the return function? — Ryan Le, Sep 02 '21 at 04:47
Each child in a list should have a unique key that mean you have allow unique key to both tags also — Sanoodia, Sep 02 '21 at 07:49

score 0 · Answer 1 · answered Sep 02 '21 at 05:53

I don't see any problem. But if we use array index for the unique key. can you try this?

class ListArtistComponent extends Component{
 constructor(props) {
  super(props);
  this.state = {
    artist: []

  }
 }
componentDidMount(){
 ArtistService.getArtist().then((res) => {
    this.setState({ artist: Array.from(res.data)});
 });
}

render() {
 return(
    <div>
        <h2 className="text-center">Artist List</h2>
        <div className="row">
            <table className="table table-striped table-bordered">

                <thead>
                    <tr>
                        <th>Artist Name</th>
                        <th>Artist Popularity</th>
                    </tr>
                </thead>
                <tbody>
                    {
                        this.state.artist.map(
                             (artist,index) =>
                                <tr key = {index}>
                                    <td> {artist.name} </td>
                                    <td> {artist.popularity} </td>
                                </tr>
                        )
                    }
                </tbody>

            </table>
        </div>
    </div>
 )
}

Each child in a list should have a unique "key" prop Error in React

1 Answers1