[英]how to solve problem with Error: Missing "key" prop for element in array react/jsx-key when I map react-icons?
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 中有这个(将来我希望它从数据库中获取):
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.我尝试了许多键组合,例如
key={`${title}` + index}
但它没有改变任何东西。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.