How can i fix the warning of " Each child in a list should have a unique "key" prop."?

Question

Apparently this warning point to this (specifically in the key of skill):

      {skills.map((skill) => (
        <motion.div
          whileInView={{ opacity: [0, 1] }}
          transition={{ duration: 0.5 }}
          className="app__skills-item app__flex"
          key={skill.name}
        >
          <div
            className="app__flex"
            style={{ backgroundColor: skill.bgColor }}
          >
            <img />
          
          <p>{skill.name}</p>
        
      ))}
    
    
      {experiences.map((experience) => (
        <motion.div
          className="app__skills-exp-item"
          key={experience.year}
        >
          
            <p>{experience.year}</p>
          
          
            {experience.works.map((work) => (
              <>
                <motion.div
                  whileInView={{ opacity: [0, 1] }}
                  transition={{ duration: 0.5 }}
                  className="app__skills-exp-work"
                  data-tip
                  data-for={work.name}
                  key={work.name}
                >
                  <h4>{work.name}</h4>
                  <p>{work.company}</p>
                
                <ReactTooltip
                  id={work.name}
                  effect="solid"
                  arrowColor="#fff"
                  className="skills-tooltip"
                >
                  {work.desc}
                
              </>
            ))}
          
        
      ))}

I tried writing skills.name instead of skill.name and writing skill.id instead of skill.name also tried the same with work.name but i think that the issue is in skill and not in work.

Does this answer your question? [Warning: Each child in a list should have a unique "key" prop](https://stackoverflow.com/questions/55153873/warning-each-child-in-a-list-should-have-a-unique-key-prop) — Daniel, Mar 26 '22 at 03:36
I read it and... i don't think so. I tried to put the key on the 2 div's above of the original in my code and shows errors — Christian Gonzalez, Mar 26 '22 at 03:49

score 0 · Accepted Answer · answered Mar 26 '22 at 16:27

You need to put the key in the fragment for the second map. Which means you will need to import { Fragment } from "react" and use it (I am talking on the experience.works.map line)

The general rule of thumb is if you are mapping [components] in React, you need a key.

You sadly cannot use the shorthand for Fragments <></> with keys currently however, hence the need to import it.

import { Fragment } from "react"
...
{experience.works.map((work,index) => (
              <Fragment key={index}>
                <motion.div
                  whileInView={{ opacity: [0, 1] }}
                  transition={{ duration: 0.5 }}
                  className="app__skills-exp-work"
                  data-tip
                  data-for={work.name}
                  key={work.name}
                >
                  <h4>{work.name}</h4>
                  <p>{work.company}</p>
                
                <ReactTooltip
                  id={work.name}
                  effect="solid"
                  arrowColor="#fff"
                  className="skills-tooltip"
                >
                  {work.desc}
                
              </>
            ))}

How can i fix the warning of " Each child in a list should have a unique "key" prop."?

1 Answers1