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

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

`const 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` и значит исправленная строка будет выглядеть вот так:

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

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

`function 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` с уникальным для каждого тега значением и проблема исчезнет.

Ключ `key` должен быть уникальным только внутри этого цикла, в другом цикле значения `key` могут совпадать со значениями из другого цикла.

Модифицируйте ваше решение предыдущей задачи в соответствии с описанным.

← →
↑