uroot
@uroot

Почему React жалуется на отсутствие ключей в обычном куске JSX?

Реакт вывыодит ошибку: "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}, то ошибка пропадёт. Не подскажите как это пофиксить и почему появляется эта ошибка? Ведь я всегда думал, что нужно только при генерации элементов указывать ключи, а тут явно дело не в этом.
  • Вопрос задан
  • 52 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы