Problem with assigning unique key in React.js

Question

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

David · Accepted Answer · 2022-09-01 20:06:28Z

1

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

answered Sep 1, 2022 at 20:06

David

221k42 gold badges245 silver badges337 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

DAKR Over a year ago

Oh god, I lost almost 3h to find it... Thank You! This resolve the problem with it. Otherwise I would be stuck on this error trying to find where is that lacking key.

Jonatan Kruszewski Over a year ago

You can expand the error in the console to see the trace and locate it @DAKR

DAKR Over a year ago

@JonatanKruszewski I know that, but I could'nt trace it to that thing <>, I just started learn React.js not that long and still don't know that much. Even if I study documentation of react.js

Collectives™ on Stack Overflow

Problem with assigning unique key in React.js

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related