Unikátní klíče v poli tagů v Reactu

V předchozím příkladu jsme vytvářeli naše odstavce v cyklu, takto:

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

Bude to fungovat, ale pokud se podíváme do konzole - uvidíme chybu: Warning: Each child in an array or iterator should have a unique "key" prop. V tomto případě React vyžaduje, aby každý tag z cyklu měl jedinečný klíč, aby React mohl s těmito tagy snadněji pracovat v budoucnu.

Tento klíč se přidává pomocí atributu key. V tomto případě jako klíč můžeme vzít index prvku v poli. V našem případě je tento index uložen v proměnné index a opravený řádek bude vypadat takto:

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

Spusťme - chyba z konzole zmizí:

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>;
}

Ještě jednou: tento atribut key má služební význam pro React, hlouběji pochopíte tento bod v následujících lekcích. Prozatím jen vězte: pokud vidíte takovou chybu - přidejte atribut key s jedinečnou hodnotou pro každý tag a problém zmizí.