1

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.

  • You're also missing a `key` prop in each logo that you render in `{logos}`. `logos` is an array of JSX elements, so each of its items need to have a `key` prop, i.e. `[, ]`. – juliomalves Sep 14 '22 at 21:28
  • Solved it the easiest way I know just change array of items to array of objects: ``` logo: [{id: "eact1", logo: } ()...] ``` –  Sep 15 '22 at 08:19

1 Answers1

0

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

Harshit paliwal
  • 1
  • 1