Уникальные ключи в массиве тегов в 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 могут совпадать со значениями
из другого цикла.
Модифицируйте ваше решение предыдущей задачи в соответствии с описанным.