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
Usare un KeyedService di default in ASP.NET Core 8
Eseguire attività con Azure Container Jobs
Eseguire operazioni sui blob con Azure Storage Actions
Inizializzare i container in Azure Container Apps
Controllare gli accessi IP alle app con Azure Container Apps
Eseguire operazioni con timeout in React
Eseguire una query su SQL Azure tramite un workflow di GitHub
Utilizzare l'operatore GroupBy come ultima istruzione di una query LINQ in Entity Framework
Effettuare delete massive con Entity Framework Core 7
Routing statico e PreRendering in una Blazor Web App
Personalizzare l'errore del rate limiting middleware in ASP.NET Core
Evitare la command injection in un workflow di GitHub