Problem with assigning unique key in React.js-CodePudding

Hey I got problem with this code down below. I dont know but I got all time error with: "Each child in a list should have a unique "key" prop." Theoretically I added everyhere I need a key for specific div with motion but everytime I try to do something its still stay there and I don't know what to do to fix it. Problem with unique key is in div className="app__skills-exp-works"> In SS added data about response from database witch I use for key data.

error and data for key used

<>
      <div className="app__skills-container">
        <motion.div className="app__skills-list">
          {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 src={urlFor(skill.icon)} alt={skill.name} />
              </div>
              <p className="p-text">{skill.name}</p>
            </motion.div>
          ))}
        </motion.div>
        <div className="app__skills-exp">
          {experiences.map((experience) => (
            <motion.div
              className="app__skills-exp-item"
              key={experience.year }
            >
              <div className="app__skills-exp-year">
                <p className="bold-text">{experience.year}</p>
              </div>
                        
                =================================================

              <motion.div className="app__skills-exp-works">
                {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 className="bold-text">{work.name}</h4>
                      <p className="p-text">{work.company}</p>
                    </motion.div>

            =======================================================
                    <ReactTooltip

                      id={work.name}
                      effect="solid"
                      arrowColor="#fff"
                      className="skills-tooltip"
                    >
                      {work.desc}
                    </ReactTooltip>
                  </>
                ))}
              </motion.div>
            </motion.div>
          ))}
        </div>
      </div>
    </>

CodePudding user response：

The third call to map() doesn't have a key on its top-level element:

{experience.works.map((work) => (
  <>
    ...
  </>
))}

There's a key on one of the child elements, but not the top-level fragment shown above.

Unless something has changed, I don't think the short fragment syntax supports props. But the longer manual syntax does:

{experience.works.map((work) => (
  <React.Fragment key={work.name}>
    ...
  </React.Fragment>
))}