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
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Generare token per autenicarsi sulle API di GitHub
Sviluppare un'interfaccia utente in React con Tailwind CSS e Preline UI
Come migrare da una form non tipizzata a una form tipizzata in Angular
Effettuare il deploy di immagini solo da container registry approvati in Kubernetes
Usare una container image come runner di GitHub Actions
Creare moduli CSS in React
Eseguire una query su SQL Azure tramite un workflow di GitHub
Evitare la script injection nelle GitHub Actions
Utilizzare flat e flatMap per appiattire array innestati in array
Criptare la comunicazione con mTLS in Azure Container Apps
Gestire i null nelle reactive form tipizzate di Angular