Ошибка в компоненте React

Question

Ошибка в компоненте React

David Zograbian Знаток (415), на голосовании 1 год назад

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

Ругается на этот блок кода, что можно дописать здесь?

{posts.map((p) => (
<Post post={p} />
))}

Answer 1

Для устранения данной ошибки в компоненте React необходимо добавить атрибут key к компоненту Post, чтобы каждый элемент списка имел уникальный ключ. Уникальный ключ должен быть присвоен для каждого элемента списка, который будет отображаться на странице.

Например:

{ posts.map ((p) => (
<Post key={p.id} post={p} />
))}

Здесь мы используем уникальный ключ id каждого объекта post в массиве posts. Вы можете использовать любой другой уникальный идентификатор, который удобен для вашего приложения.

Answer 2

Каждый дочерний элемент списка должен иметь уникальный пропс key. Если в p нет ничего подходящего, можно использовать аргумент индекс.

 posts.map((post, index) => (
  
))