Уникальные ключи в массиве тегов в React

В предыдущем примере мы формировали наши абзацы в цикле, вот так:

jsxconst res = arr.map(function(item) {
  return <p>{item}</p>;
});

Это будет работать, однако, если заглянуть в консоль - мы увидим ошибку: Warning: Each child in an array or iterator should have a unique "key" prop. В данном случае React требует, чтобы каждому тегу из цикла мы дали уникальный номер, чтобы React было проще с этими тегами работать в дальнейшем.

Этот номер добавляется с помощью атрибута key. В данном случае в качестве номера мы можем взять номер элемента в массиве. В нашем случае этот номер хранится в переменной index и значит исправленная строка будет выглядеть вот так:

jsxconst res = arr.map(function(item, index) {
  return <p key={index}>{item}</p>;
});

Давайте запустим - ошибка из консоли исчезнет:

jsxfunction App() {
  const arr = [1, 2, 3, 4, 5];
  
  const res = arr.map(function(item, index) {
    return <p key={index}>{item}</p>;
  });
  
  return <div>
    {res}
  </div>;
}

Еще раз: этот атрибут key имеет служебное значение для React, более глубоко вы поймете этот момент в следующих уроках. Пока просто знайте: если вы видите такую ошибку - добавьте атрибут key с уникальным для каждого тега значением и проблема исчезнет.