Una delle funzionalità più comuni di un'applicazione web è sicuramente quella di renderizzare liste in diversi formati. In alcuni casi utilizziamo elenchi puntati, in altri usiamo delle griglie, in altri casi usiamo delle ListView. A prescindere dalla forma che diamo alla lista, in JSX possiamo renderizzare una lista di oggetti utilizzando il metodo map della classe Array di JavaScript.
function RenderList() { const items = [ { id: 1, firstName: "Stefano", lastName: "Mostarda" }, { id: 2, firstName: "Daniele", lastName: "Bochicchio" }, { id: 3, firstName: "Marco", lastName: "Leoncini" }, ]; return ( <ul> {items.map((item) => <li key={item.id.toString()}>{item.firstName} - {item.lastName}</li>} </ul> ); }
Il metodo map viene invocato per ogni singolo elemento dell'array e in questo caso renderizza un oggetto li. La cosa importante da sottolineare è che l'oggetto nella lista deve avere una proprietà key. Questa proprietà deve essere univoca all'interno della lista e serve a React per tenere traccia delle modifiche fatte agli oggetti della lista e ottimizzare il rendering.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Welcome to #GlobalAzure
Dimensionare dinamicamente una TextArea in Blazor
Azure Kubernetes Service con .NET 5
PWAConf 2020
Disabilitare un pulsante in Blazor durante il salvataggio
Gestire gli app role di Azure Active Directory
Un confronto tra React, Angular, Vue.js e Svelte
Mappare l'ereditarietà di una gerarchia di oggetti usando il TPT in Entity Framework Core 5
Progressive Web Apps with React
Condividere una variabile tra stage in una pipeline YAML di Azure DevOps
Monitorare lo stato di salute di un Azure App Service
Cercare del testo con Azure Cosmos DB SQL
I più letti di oggi
- Visual Basic 2010
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Modern Data Access with .NET Core and Entity Framework Core
- Rendering di raw HTML in Blazor
- Curiosi di sapere le novità di #azure per gli sviluppatori? Sintonizzatevi su #aspilive, con @crad77 Siamo sempre live da https://aspit.co/Rebuild-20