当唯一标识符已经存在时，对缺少唯一“关键”道具的错误做出反应

Question

The app is a portfolio using a React frontend and I am writing in Javascript, not Typescript. I am using Sanity as a headless CMS to store the data.

I am using useEffect to fetch the data. I am using a .map to loop over each section to render the following information for my site: skill.name, experience.year, work.name. Each of these sections is inside its own and each has a unique key: skill.name, experience.year, work.name.

I know I have to give each child in a component a "unique 'key' prop" in React. What I am rendering has unique identifiers already: the skill.name, experience.year, work.name

The error being produced is as follows: Warning: Each child in a list should have a unique "key" prop. Check the render method of Skills .

Does anyone have any suggestions on what I am missing here?

<div className="app__skills-container">
    <motion.div className="app__skills-list">
      {/* fetch Skills from Sanity CMS and map over them*/}
      {skills?.map((skill) => (
        <motion.div whileInView={{ opacity: [0, 1] }} transition={{ duration: 0.5 }} `enter code here`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>

<motion.div className="app__skills-exp">
      {/* {console.log("----- skills-exp:", experience.works)} */}
      {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">
            {/* 1st loops of year, then loop over the experiences contained within */}
            {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>

Answer 1

If you're not sure that no keys repeat you can always use helper index in map like this:

<TableBody>
    {
        products ?
            (
                products.length > 0 ?
                    products.map((product, idx) => (
                        <TableRowProduct
                            key={idx}
                            item={product}
                        />
                    ))
                    :
                    <TableRow>
                        <TableCell align="center" colSpan={columns.length}>
                            <Alert severity="info">The list is empty/Alert>
                        </TableCell>
                    </TableRow>
            )
            :
            <TableRow>
                <TableCell align="center" colSpan={columns.length}><CircularProgress/></TableCell>
            </TableRow>
    }
</TableBody>

Answer 2

As mentioned in the accepted answer here , the key has to be on the outermost child of the map. That's not the case in experience.works.map() , so I'd be interested if the error would go away if you were to change <> to <React.Fragment key={work.name}> .