Each child in a list should have a unique "key" prop?

[kazooi]

Hi there,

I created an accordion for a FAQ section with React / Next.js.

The code inside the data file looks like this:

import FaqAccordion from './FaqAccordion';

const FaqData = () => {
  const accordionData = [
    {
      title: 'Question 01 ?',
      content: `Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quis sapiente
        laborum cupiditate possimus labore, hic temporibus velit dicta earum
        suscipit commodi eum enim atque at? Et perspiciatis dolore iure
        voluptatem.`,
    },
    {
      title: 'Question 02 ?',
      content: `Lorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia veniam
        reprehenderit nam assumenda voluptatem ut. Ipsum eius dicta, officiis
        quaerat iure quos dolorum accusantium ducimus in illum vero commodi
        pariatur? Impedit autem esse nostrum quasi, fugiat a aut error cumque
        quidem maiores doloremque est numquam praesentium eos voluptatem amet!
        Repudiandae, mollitia id reprehenderit a ab odit!`,
    },
    {
      title: 'Question 03 ?,
      content: `Sapiente expedita hic obcaecati, laboriosam similique omnis architecto ducimus magnam accusantium corrupti
        quam sint dolore pariatur perspiciatis, necessitatibus rem vel dignissimos
        dolor ut sequi minus iste? Quas?`,
    },
    {
      title: 'Question 04 ?',
      content: `Sapiente expedita hic obcaecati, laboriosam similique omnis architecto ducimus magnam accusantium corrupti
          quam sint dolore pariatur perspiciatis, necessitatibus rem vel dignissimos
          dolor ut sequi minus iste? Quas?`,
    },
  ];

  return (
    <div>
      <div className="faq-container">
        <div className="faq-wrapper">
          <h2>Frequently Asked Questions</h2>
        </div>
        <div className="faq-wrapper">
          {accordionData.map(({ title, content }) => (
            <FaqAccordion title={title} content={content} />
          ))}
        </div>
      </div>
    </div>
  );
};

export default FaqData;

The code to display the FAQ section looks like this:

import { useState } from 'react';

const FAQ = ({ title, content }) => {
  const [isActive, setIsActive] = useState(false);

  return (
    <>
      <div className="faq-item">
        <div className="faq-title" onClick={() => setIsActive(!isActive)}>
          <p>{title}</p>
          <div>{isActive ? '-' : '+'}</div>
        </div>
        {isActive && (
          <div className="faq-content">
            <p>{content}</p>
          </div>
        )}
      </div>
    </>
  );
};

export default FAQ;

When I check the console, I get this error message:

This is the link to the explenation:

Lists and Keys – React

I read the explenation, but I dont understand why I should pass in a key and where should I pass in this key??

Can someone help?

Thank you!

[Cody_Biggs]

A key is basically a way to identify each element in an array. So, in your example it keeps track of the accordian data. So, the title for question1 and content would have a key, the title for question2 and and content would have a key. This way react can keep track if any of those change, get deleted, etc.

If your using an array you want a key in the element you are mapping through. It should go in your . That said you do not want to use the index as a key.

[kazooi]

@Cody_Biggs thanks for your answer!

Where do I set the key for the title and content? Can you please give me an example within the code I sended?

[jonathan.roley]

As long as you don’t have two titles that are exactly the same, you can use that as the key.

<FaqAccordion key={title} ... />

[kazooi]

Thank you, that helps to get rid of the error message, but do I dont need to set a key for the content as well?

Somethig like this:

 <FaqAccordion key={title, content}

[Cody_Biggs]

As far as I know. You only need the one key. Because content and title are both part of one accordian. Everything in that one <faqaccordian /> share the sane key. So faq1 title and content will have the same key. Faq2 title and content will have the same key and so on

So just like Jonathan has it