Warning unique "key" prop react

Question

Hello everyone!

I don’t understand why I get the warning "Each child in a list should have a unique "key" prop.", despite I pass as key a unique value.

This is the error:

This is the code of TimelinePage:

const TimelinePage = () => {
  return (
    <section data-aos="fade-up" className="timeline-section" id="timeline" style={{paddingTop: "70px", marginTop: "-70px", marginBottom: "10px"}}>
      <div className="container px-5 py-10 mx-auto">
        <div className="text-center mb-20">
            <div className="w-10 inline-block mb-4" style={{color: "rgba(156, 163, 175, var(--tw-text-opacity))"}}>
              <img src="./timeline.svg" alt="timeline" />
            </div>
            <h1 className="sm:text-4xl text-3xl font-medium title-font text-white mb-4">
              Percorso scolastico ed esperienze lavorative
            </h1>
          </div>
        <div className="timeline-items">
          {timelineElements.map((item) => {
            return (
              <div key={item.id} data-aos={item.id % 2 === 0 ? "fade-left" : "fade-right"} className="timeline-item">
                <div className="timeline-dot"></div>
                <div className="timeline-date">{item.date}</div>
                <div className="timeline-content">
                  <h3 style={{marginBottom: "0px", color: "white"}}>{item.title}</h3>
                  <h4 style={{marginBottom: "20px", paddingTop: "0px", color: "white", fontSize: "16px"}} className="timeline-subtitle">{item.location}</h4>
                  <p>{item.description}</p>
                </div>
              </div>
            )
          })}
        </div>
      </div>
    </section>
  );
};

This is the array "timelineElements" (with some information eliminated for privacy):

export const timelineElements = [
  {
    id: 1,
    title: "Diploma in Sistemi Informativi Aziendali",
    location: "",
    description:
      "",
    date: ""
  },
  {
    id: 2,
    title: "Programmatore",
    location: "",
    description:
      [""],
    date: ""
  },
  {
    id: 3,
    title: "Corso di Laurea Triennale in Informatica",
    location: "Università degli studi di Torino",
    description:
      "",
    date: ""
  },
  {
    id: 4,
    title: "Programmatore",
    location: "",
    description: [""],
    date: ""
  },
  {
    id: 5,
    title: "Corso di Laurea Magistrale in Informatica",
    location: "Università degli studi di Torino",
    description:
      "",
    date: ""
  }
];

What can i do to delete this warning?

Thanks in advance!

@SomeoneSpecial OP clearly has a `key` on the iterated element — Phil, Mar 10 '22 at 00:47
Oops. Chances is your `item.id` is duplicated. @Phil probably it's not unique? — Someone Special, Mar 10 '22 at 00:48
Your `description` property is an array for _some_ items and a string for others. I'd definitely clean that up. — Phil, Mar 10 '22 at 00:49
The error message points to a `
` element not present in your question. Have you perhaps redacted too much? — Phil, Mar 10 '22 at 00:50
@Phil I don't have
in my TimelinePage, that's the problem... I really don't understand where the problem come from — BlowLore, Mar 10 '22 at 00:53
No repro ~ https://codesandbox.io/s/funny-oskar-qj34n8?file=/src/TimelinePage.tsx — Phil, Mar 10 '22 at 01:05
Have you restarted the development server? Could be a caching issue. — Henry Woody, Mar 10 '22 at 01:14
@BlowLore not exactly sure what you mean but, no. The link I provided is a runnable version of your question code and there are no warnings or errors from the app. — Phil, Mar 10 '22 at 01:17
@Phil I don't know.. it is really strange because now I uploaded the website on netlify and i don't see the warning in the console... btw, thank you very much — BlowLore, Mar 10 '22 at 01:18

score -2 · Answer 1 · answered Mar 10 '22 at 01:02

-2

try this:

{timelineElements.map((item, index) => {
        return (
          <div key={index} data-aos={item.id % 2 === 0 ? "fade-left" : "fade-right"} className="timeline-item">
            <div className="timeline-dot"></div>
            <div className="timeline-date">{item.date}</div>
            <div className="timeline-content">
              <h3 style={{marginBottom: "0px", color: "white"}}>{item.title}</h3>
              <h4 style={{marginBottom: "20px", paddingTop: "0px", color: "white", fontSize: "16px"}} className="timeline-subtitle">{item.location}</h4>
              <p>{item.description}</p>
            </div>
          </div>
        )
      })}

make sure you don`t use the component many times

answered Mar 10 '22 at 01:02

kinanOoO

1

1

[Array index is not a good key](https://medium.com/@vraa/why-using-an-index-as-key-in-react-is-probably-a-bad-idea-7543de68b17c) – Phil Mar 10 '22 at 01:06
@Phil mmm i think he use the component many times so in the parent he should pass the index from there then mix it with the array index or the id : – kinanOoO Mar 10 '22 at 21:47
Whatever OP's problem is, it's not in the code they've presented so this question is not reproducible – Phil Mar 10 '22 at 22:00
any way .. i just want to help him – kinanOoO Mar 10 '22 at 22:10
we always ignore the warnings and filter console to see errors :) – kinanOoO Mar 10 '22 at 22:14

Warning unique "key" prop react

1 Answers1