Cosa viene usato per visualizzare un elenco di dati in JSX?

Per visualizzare un elenco di dati in JSX, si utilizza il metodo .map() degli array JavaScript.

// Esempio di array di dati
const items = ['Voce 1', 'Voce 2', 'Voce 3'];

// Visualizzazione dell'elenco con .map()
const List = () => (
  <ul>
    {items.map((item, index) => (
      // È obbligatorio usare una chiave unica per ogni elemento della lista
      <li key={index}>{item}</li>
    ))}
  </ul>
);

map() attraversa ogni elemento dell'array e restituisce un nuovo array di elementi React, che vengono poi renderizzati nel DOM. È importante usare una proprietà key unica per ogni elemento della lista. Questo aiuta React ad aggiornare in modo efficiente l'interfaccia utente quando la lista cambia. Come key, si può usare un identificatore unico dei dati, o in sua assenza, l'indice dell'elemento nell'array.