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

paparonnie 0
Viewed 54

I have a document (Sanity Schema) called 'category' that contains an array called 'contained_sets', which references another sanity schema document called 'set'.

E.g., the category 'exhibitions' has a field where I can select other sets to reference from ('place a', 'place b', 'place c'). I have more than 1 'category' files. Here is an example of the fourth category (out of 6): enter image description here

My gallery page works fine, and I can fetch the data for the 'category' type easily, but I need a page that can link to a new webpage that shows the selected category's contained sets. This is my set.js file so far, and I tried to add a key but I'm still getting the same error (the error

message never came up for the gallery page so no keys in there):
import React, { useState, useEffect } from 'react';
import { client, urlFor } from '../lib/client';
import { Header, Footer } from '../components';

const sets = () => {
   // fetches sanity data

  const [categoryData, setCategories] = useState(null);

  useEffect(() => {
    client.fetch(
        `*[_type=="category"]{
            contained_sets[]->{set_name, image{asset->{_id, url}}}
        }`)
        .then((data) => setCategories(data))
        .catch(err => console.error(err));
  }, [] );

  return (
    <div>
      <Header />
      <main className="main-gallery"> 
        <div className="title">
            <div className="title-line-left"></div>
            {categoryData && categoryData.map((contained_sets, index) => (
              <React.Fragment key={contained_sets.id}>
                <h2>{contained_sets.set_name}</h2>
              </React.Fragment>
            ))}
            <div className="title-line-right"></div>
        </div>
        <div className="categories">
        </div>
      </main>
      <Footer />
    </div>
  )
}

export default sets

EDIT: sorry, I didn't realise I included the commented out section (I'll remove it from the post now to prevent further confusion). Thanks for the tips though, I'll add a key to the list- but I'm actually getting the error for this part:

<div className="title">
            <div className="title-line-left"></div>
            {categoryData && categoryData.map((contained_sets, index) => (
              <React.Fragment key={contained_sets.id}>
                <h2>{contained_sets.set_name}</h2>
              </React.Fragment>
            ))}
            <div className="title-line-right"></div>
        </div>
key sanity fetch-api next.js reactjs
3 Answers

Just pass key={index} prop to your List Item

Q - But why react gave you warning ?

Ans - Now whenever your each List Item is changed it will have a unique key, so DOM can easily find your LI using that key and update it.

Ref - https://reactjs.org/docs/lists-and-keys.html

umer sheraz0

pass the index as a key :

 <ul className="categories-container">
              {/* {categoryData && categoryData.map((category, index) => (
                  // <li key={index}>
                  //     <img src= alt={category.contained_sets.set_name}/>
                  // </li>
              ))} */}
            </ul>
Md Joynul Abedin0

The thing is the immediate element which is getting returned inside map, should have prop "key" defined as unique value.

In your case it's <li> element & not the child element inside it. So try giving "key" to <li> element.

Shubham SHACK0
Related