Почему react не присваивает ключи?

Question

[Judje_1337]

Выводит предупреждение
react-jsx-dev-runtime.development.js:87 Warning: Each child in a list should have a unique "key" prop.

Check the render method of `Catalog`. See https://reactjs.org/link/warning-keys for more information.
at Catalog
at RenderedRoute (localhost:3000/static/js/bundle.js:39820:5)
at Routes (localhost:3000/static/js/bundle.js:40437:5)
at Router (localhost:3000/static/js/bundle.js:40375:15)
at BrowserRouter (localhost:3000/static/js/bundle.js:38490:5)
at div
at App

Хотя в компоненте прописываю ключ

import React from "react";
const item = ({ id, imageUrl, title, price, unit, weight, packageType }) => {
  return (
    <div key={id} className="w-[280px] h-[460px]">
      <img src={imageUrl} className="w-64 h-64" alt="" srcSet="" />
      <h3 className="text-center font-extrabold text-xl my-[11px] truncate">
        {title}
      </h3>
      <div className="bg-[#F3F3F3] w-[280px] h-[85px] flex flex-col">
        <div className="flex">{packageType}</div>
      </div>
    </div>
  );
};

export default item;

Также пробовал прописывать ключ не в компоненте, а при его рендере на странице, но предупреждение осталось

import React from "react";
import Item from "../components/Item";
import items from "../assets/items.json";
const Catalog = () => {
  return (
    <div>
      <h1 className="text-[2rem] font-bold  px-[4.85rem] pt-3"> Наш каталог</h1>
      <div className="px-[4.85rem] pt-3 flex flex-wrap gap-x-32 justify-center">
        {items.map((i) => (
          <>
            <Item key={i.id} {...i} />
          </>
        ))}
      </div>
    </div>
  );
};

И ещё пример json файла, может быть тут ошибка

[
  {
    "id": 0,
    "imageUrl": "https://ir.ozone.ru/multimedia/wc700/1018330363.jpg",
    "type": "Конфеты",
    "title": "Трюфельные конфеты",
    "package": ["В упаковке", "на развес"],
    "price": 164,
    "weight": [300, 500, 900],
    "unit": "мг"
  },
  {
    "id": 1,
    "imageUrl": "https://ir.ozone.ru/s3/multimedia-r/wc700/6628790571.jpg",
    "type": "Печенье",
    "title": "Песочные печенья",
    "package": ["В упаковке", "на развес"],
    "price": 245,
    "weight": [100, 300, 500],
    "unit": "мг"
  },
  {
    "id": 2,
    "imageUrl": "https://ir.ozone.ru/s3/multimedia-1/wc700/6562580461.jpg",
    "type": "Вафли",
    "title": "Бельгийские вафли",
    "packageType": ["В упаковке", "на развес"],
    "price": 89,
    "weight": [300, 500, 900],
    "unit": "мг"
  },
]

Comments

[chemdev]

У тебя он обернут в пустой компонент, убери

[chemdev]

Judje_1337, добавь второй аргумент в функцию которую посылаешь в map и используй его в качестве ключа

[chemdev]

Judje_1337, и перезапусти npm start

[szQocks]

Judje_1337, почитай документацию про ключи, и поймёшь что ты делаешь не верно, не надо отлавливать внутри компонента props.key, в документации ясно сказано если ты хочешь каким-то образом прокинуть ключ внутрь компонента и присвоить его уже внутри - тогда следует прокинуть данные другим свойством, то есть не key={key} а например innerKey={key} и внутри компонента уже отлавливать props.innerKey

[szQocks]

Judje_1337, в твоём случае нужно просто убрать key={i.id} и всё, раз ты внутри компонента напрямую устанавливаешь ключ, или убери key={id}, что-то одно из двух

[VoidVolker]

Judje_1337 Правила 3.8

Answer 1

[Михаил Р.]

Each child in a list should have a unique "key" prop

https://react.dev/learn/rendering-lists#keeping-li...

// ..

{items.map((i) => (
  <React.Fragment key={i.id}>
    <Item {...i}/>
  </React.Fragment>
))}

// ..

или

// ..

{items.map((i) => (
  <Item key={i.id} {...i}/>
))}

// ..

Comments

[szQocks]

а у него ж фрагмент там, я вообще не обратил внимания, брр, он тут лишний