Una delle funzionalità più comuni di un'applicazione web è sicuramente quella di renderizzare liste in diversi formati. In alcuni casi utilizziamo elenchi puntati, in altri usiamo delle griglie, in altri casi usiamo delle ListView. A prescindere dalla forma che diamo alla lista, in JSX possiamo renderizzare una lista di oggetti utilizzando il metodo map della classe Array di JavaScript.

function RenderList() {
  const items = [
    { id: 1, firstName: "Stefano", lastName: "Mostarda" },
    { id: 2, firstName: "Daniele", lastName: "Bochicchio" },
    { id: 3, firstName: "Marco", lastName: "Leoncini" },
  ];

  return (
    <ul>      {items.map((item) =>
        <li key={item.id.toString()}>{item.firstName} - {item.lastName}</li>}
    </ul>
  );
}

Il metodo map viene invocato per ogni singolo elemento dell'array e in questo caso renderizza un oggetto li. La cosa importante da sottolineare è che l'oggetto nella lista deve avere una proprietà key. Questa proprietà deve essere univoca all'interno della lista e serve a React per tenere traccia delle modifiche fatte agli oggetti della lista e ottimizzare il rendering.