Реакт вывыодит ошибку:
"Warning: Each child in a list should have a unique "key" prop" на обычном куске JSX-а. Не подскажите почему?
Есть компонент:
{
data.map((element) =>
<Card
key={element.key}
img={element.img}
name={element.name}
handleToggle={element.action()}
hoverTitle={element.hoverTitle}
desk={element.desk}
btnText={element.btnText}
btmMod={element.btmMod}
imgMod={element.imgMod}
bgMod={element.bgMod}
/>
)
}
Компонент Card:
spoiler<div
className={"card " + (bgMod)}
ref={cardWrapper}
>
<div
className={"card__nav card--zIndex"}
onClick={() => handleToggle(cardWrapper)}
>
<svg></svg>
</div>
<div className={"card__img " + (imgMod)}>
<img alt={name} src={img} />
</div>
<div className={"card__name card--zIndex"}>
{name}
</div>
<div className={"card__desk"}>
{desk}
</div>
<div className={"card__hover-title"}>
{hoverTitle}
</div>
<Button
mod={btmMod}
text={btnText}
/>
<svg></svg>
<div className={"card__inner"} />
</div>
Если в компоненте Card убрать {hoverTitle}, то ошибка пропадёт. Не подскажите как это пофиксить и почему появляется эта ошибка? Ведь я всегда думал, что нужно только при генерации элементов указывать ключи, а тут явно дело не в этом.
Простой
