how to solve problem with Error: Missing "key" prop for element in array react/jsx-key when I map react-icons?

Question

I tried many methods to display dynamically Icons,but this one work in my case:

   <div style={{display: "flex", flexDirection: "row"}}>
   {logo?.map((logos, index )=> {return (
    <React.Fragment key={index}>
    <IconContext.Provider
    key={index}
      value={{ color: "#fff", size: '30px', display: "inlineblock"}}
    >
      <div>
{logos}
</div>
    </IconContext.Provider>
    </React.Fragment>
   )})     }</div>

I have this (in future I want it fetch from database) in const:

const realizacjeGallery = [{
  id: "ssss",
  title: "ssss", 
  description: <>zzxxx</>,
  photo: zzz,
  logo: [<DiReact/>, <SiFirebase/>]
},
{ id: "ss",
  title: "ssss",
description: <>zzz
</>,
photo: zzz,
logo: [<DiReact/>, <SiFirebase/>]

}, 
{
  id: "zzz",
  title: "sssl",
description: <>ssss
</>,
photo: muz,
logo: [<BsWordpress/>, <DiJqueryLogo/>]

}

]

and this piece of code display on frond-end my icons. But after deployment, I get an fatal error:

Error: Missing "key" prop for element in array  react/jsx-key

and I do not have any clue what more I should do. I tried many combinations of key like key={`${title}` + index} but it do not change anything.

Answer 1

In react, index should be the last thing to pass as Key you can use title or unique ID as key. you can read more here

More