Renderizzare una lista di oggetti in JSX

di Stefano Mostarda, in HTML5, React,

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.

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi