Renderizzare una lista è una delle attività più comuni in JSX. Basta pensare al rendering di un tag table e dei vari tag tr o di un tag ul e dei vari tag li. Per renderizzare una lista non possiamo usare un ciclo for, ma dobbiamo ricorrere al metodo map della classe Array. Questo metodo prende in input un elemento della lista e ritorna il frammento di HTML legato all'elemento.

function MyComponent() {
  const data = [
    { id: 1, firstName: 'stefano', lastName: 'mostarda' },
    { id: 2, firstName: 'daniele', lastName: 'bochicchio' }
  ];
  return (
    <ul>      data.map(p => 
        <li key={p.id}>{p.firstName} {p.lastName}</li>
      );
    </ul>
  );

In questo esempio, viene generato un tag ul e due tag li uno per ogni elemento nella variabile data. Al fine di permettere a React di tracciare ogni singolo record, è fondamentale mettere un attributo key con la chiave di ogni riga.