Quando si sviluppano applicazioni web moderne, è comune visualizzare collezioni di dati ricevuti dal backend. Per ottenere questo risultato, si utilizza il metodo map(). All'interno del metodo map(), si impiega una funzione di callback e si restituisce del JSX per visualizzare l'output desiderato.

Prendiamo un esempio per illustrare il funzionamento. Avremo un componente App che passerà la prop toys, un array di oggetti. Il componente ToyCard utilizzerà il metodo map() per visualizzare ogni giocattolo nell'array.

// Data from backend
const toysData = [
  { id: "id-1", name: "Rainbow Sparkle Unicorn Plush" },
  { id: "id-2", name: "Jungle Adventure Playset" },
  { id: "id-3", name: "Magical Princess Castle Dollhouse" },
  { id: "id-4", name: "RoboBot Transformer Robot" },
  { id: "id-5", name: "SuperBlast Action Figure" },
];

// Child component
const ToyCard = (props) => (
  <ul>
    {props.toys.map((toy) => (
      <li>{toy.name}</li>
    ))}
  </ul>
);

// Parent component
const App = () => (
  <>
    <ToyCard toys={toysData} />
  </>
);

Nelle righe 13-15, osserviamo l'utilizzo del metodo map(). Questo ci permette di iterare su ogni elemento dell'array, estrarre il suo valore e generare un markup specifico basato sui dati di ciascun elemento.

Codice completo dell'app:

Tuttavia, se prestiamo attenzione alla console, possiamo notare l'avviso: Each child in a list should have a unique "key" prop..

Key

La key è una prop stringa fondamentale che deve essere assegnata quando si creano elementi all'interno di una collezione.

React utilizza le key per garantire un'identità stabile agli elementi di una collezione. Queste chiavi permettono a React di identificare quali elementi devono essere ri-renderizzati e ricreati quando si verificano cambiamenti, invece di ricreare l'intera collezione. L'utilizzo delle key previene la ricreazione non necessaria degli elementi, migliorando così le prestazioni.

Nota

La key deve essere unica tra gli elementi adiacenti. Deve rimanere costante e non cambiare nel tempo.

Si consiglia comunemente di utilizzare identificatori, come i valori id provenienti dai dati del backend, come prop key. Questa pratica consente a React di identificare e gestire efficacemente i singoli elementi all'interno di una collezione.

Correggiamo la nostra precedente applicazione utilizzando le prop key per gli elementi:

// Data from backend
const toysData = [
  { id: "id-1", name: "Rainbow Sparkle Unicorn Plush" },
  { id: "id-2", name: "Jungle Adventure Playset" },
  { id: "id-3", name: "Magical Princess Castle Dollhouse" },
  { id: "id-4", name: "RoboBot Transformer Robot" },
  { id: "id-5", name: "SuperBlast Action Figure" },
];

// Child component
const ToyCard = (props) => (
  <ul>
    {props.toys.map((toy) => (
      <li key={toy.id}>{toy.name}</li>
    ))}
  </ul>
);

// Parent component
const App = () => (
  <>
    <ToyCard toys={toysData} />
  </>
);

Riga 14: la prop key viene impostata sull'elemento che verrà renderizzato più volte all'interno di un array di dati.

Codice completo dell'app: