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

Question

I just start a basic React project and in my home.js I can see this warning. Please note that I've added the key as unique key in home.js but still the error is there. I have checked other posts from the community, but I was not able to spot the error, hence asking for help!

If you could help, I would owe you a lot!

Warning: Each child in a list should have a unique "key" prop.

Check the render method of `home`. See https://reactjs.org/link/warning-keys for more information.
    at small
    at Homepage (http://localhost:3000/static/js/bundle.js:613:63)
    at Routes (http://localhost:3000/static/js/bundle.js:39951:5)
    at div
    at ApolloProvider (http://localhost:3000/static/js/bundle.js:55884:19)
    at Router (http://localhost:3000/static/js/bundle.js:39884:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:39364:5)
    at App

Please find bellow my home.js

import React from 'react'
import { Link } from 'react-router-dom'
import { useQuery, gql } from '@apollo/client'

const REVIEWS = gql`
  query GetReviews {
    reviews {
        data{
            id
            attributes{
              title
              rating
              body
              categories{
                data{
                  attributes
                  {
                    name
                  }
                }
              }
            }
        }
    }
  }
`
export default function Homepage() {
    const { loading, error, data } = useQuery(REVIEWS)

    if (loading) return <p>Loading...</p>
    if (error) return <p>Error :(</p>

    console.log(data)

    return (
        <div>
            {data.reviews.data.map(review => (
                <div key={review.id} className="review-card">
                    <div className="rating">{review.attributes.rating}</div>
                    <h2>{review.attributes.title}</h2>

                    {review.attributes.categories.data.map(c => (
                        <small key={c.id}>{c.attributes.name}</small>
                    ))}

                    <p>{review.attributes.body.substring(0, 200)}... </p>
                    <Link to={`/details/${review.id}`}>Read more</Link>
                </div>
            ))}
        </div>
    )
}

This is my App.js

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
import { ApolloClient, InMemoryCache, ApolloProvider } from "@apollo/client"

// page & layout imports
import Homepage from './pages/Homepage'
import ReviewDetails from './pages/ReviewDetails'
import Category from './pages/Category'
import SiteHeader from "./components/SiteHeader"

// apollo client
const client = new ApolloClient({
  uri: 'http://localhost:1337/graphql',
  cache: new InMemoryCache()
})

function App() {
  return (
      <Router>
        <ApolloProvider client={client}>
          <div className="App">
            <SiteHeader />
            <Routes>
              <Route exact path="/" element={ <Homepage />}>

              </Route>
              <Route exact path="/details/:id" element={<ReviewDetails />}>

              </Route>
              <Route exact path="/category/:id" element={<Category />}>

              </Route>
            </Routes>
          </div>
        </ApolloProvider>
      </Router>
  );
}

export default App

Answer 1

I'm new to react as well. Does {review.id} exist and is it unique? Please see if it is review._id or something like that.

if review.id doesn't exist or if it not unique....then this is one other way to fix this.

 {data.reviews.data.map((review, i) => ( 
 <div key={i} className="review-card"> // ->made only this change

 <div className="rating">{review.attributes.rating}</div>
                    <h2>{review.attributes.title}</h2>

                    {review.attributes.categories.data.map(c => (
                        <small key={c.id}>{c.attributes.name}</small>
                    ))}

                    <p>{review.attributes.body.substring(0, 200)}... 
                     </p>
                    <Link to={`/details/${review.id}`}>Read 
                  more</Link>
                </div>
            ))}
        </div>
    )
}
 

Answer 2

Thank you! You pointed me in the right direction! I was missing the id in gql statement

 query GetReviews {
    reviews {
        data{
            id
            attributes{
              title
              rating
              body
              categories{
                data{
                  id
                  attributes
                  {
                    name
                  }
                }
              }
            }
        }
    }
  }