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

Issue

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.

Solution

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

Answered By - Daniel

Answer Checked By - Timothy Miller (PHPFixing Admin)