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.

Answer 1

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}
                
              </>
            ))}