Can't find the missing key for the child

bamf12 0
Viewed 31

novice developer here.

I can't seem to solve this missing key error. I've used the key prop for each time i've mapped but I can't seem to find the child with the missing key. please help!

I've tried putting key props in some of the child divs but still no success.

      <h2 className="head-text">Skills & Experience</h2>

      <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>
        <motion.div className="app__skills-exp">
          {experience.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>
          ))}
        </motion.div>
      </div>
    </>
  );
};

export default AppWrap(
  MotionWrap(Skills, 'app__skills'), 
  'skills', "app__whitebg"
  );
sanity reactjs
2 Answers

Error is with <>...</> items in your

{experience.works.map((work) => (
  <>
    <motion.div key={work.name}>
      {/* ... */}
    </motion.div>
  </>
))}

They are top-level DOM nodes inside of your map function, so they should have the key, not the child motion.div.

But they cant have key, so you will need to use Fragments. They are just the same.

import {Fragment} from "react";

{experience.works.map((work) => (
  <Fragment key={work.name}>
    <motion.div
      whileInView={{ opacity: [0, 1] }}
      transition={{ duration: 0.5 }}
      className="app__skills-exp-work"
      data-tip
      data-for={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>
  </Fragment>
))}
Sergey Sosunov0

According to react docs, the key has to be

a string that uniquely identifies a list item among its siblings

It is possible that the key you have provided for each element is not unique. For eg key={skill.name} key={experience.year} will not work if there are two list items with the same name or year respectively.

What you can do is use any uniquely identifiable property of the list item or the index of the array.

 {skills.map((skill, index) => (
            <motion.div
              whileInView={{ opacity: [0, 1] }}
              transition={{ duration: 0.5 }}
              className="app__skills-item app__flex"
              key={index}
            >
              <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>
          ))}
RobLjm0
Related