Check the render method of `App`. Each child in a list should have a unique "key" prop

Question

Не могу понять в чем именно ошибка,приложение работает но в консоли это

Warning: Each child in a list should have a unique "key" prop. Check the render method of App

    function App() {
  return (
    <div className="mainBox">
      {items.map((obj) => (
        <Pizza tittle={obj.tittle} imageUrl={obj.imageUrl} />
      ))}
    </div>
  );
}

Answer 1

В React списки должны иметь уникальные ключи. Это позволяет react.js более точечно управлять содержимым.

Для задания ключей, передаем в компонент(или html тег) атрибут key.

Можно сделать ключ как номер индекса массива:

function App() {
  return (
    <div className="mainBox">
      {items.map((obj, idx) => (
        <Pizza key={idx} tittle={obj.tittle} imageUrl={obj.imageUrl} />
      ))}
    </div>
  );
}

Если ваш obj содержит, допустим, уникальный id, то это будет лучшим решением:

function App() {
  return (
    <div className="mainBox">
      {items.map(obj => (
        <Pizza key={obj.id} tittle={obj.tittle} imageUrl={obj.imageUrl} />
      ))}
    </div>
  );
}

БЛОГ НА HUSL

Check the render method of `App`. Each child in a list should have a unique "key" prop

Ответы (1 шт):