Унікальныя ключы ў масіве тэгаў у 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 з унікальным для кожнага тэга значэннем і праблема знікне.