Chiavi univoche nell'array di tag in React

Nell'esempio precedente abbiamo formato i nostri paragrafi in un ciclo, in questo modo:

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

Questo funzionerà, tuttavia, se guardiamo nella console - vedremo un errore: Warning: Each child in an array or iterator should have a unique "key" prop. In questo caso React richiede che ad ogni tag del ciclo venga assegnato un numero univoco, in modo che React possa lavorare più facilmente con questi tag in seguito.

Questo numero viene aggiunto tramite l'attributo key. In questo caso come numero possiamo prendere il numero dell'elemento nell'array. Nel nostro caso questo numero è memorizzato nella variabile index e quindi la riga corretta sarà così:

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

Avviamo - l'errore nella console scomparirà:

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

Ancora una volta: questo attributo key ha un significato di servizio per React, capirete più a fondo questo punto nelle prossime lezioni. Per ora semplicemente sappiate: se vedete un errore del genere - aggiungete l'attributo key con un valore univoco per ogni tag e il problema scomparirà.