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
Potenziare Azure AI Search con la ricerca vettoriale
Ottimizzare la latenza in Blazor 8 tramite InteractiveAuto render mode
Gestire liste di tipi semplici con Entity Framework Core
Gestire undefined e partial nelle reactive forms di Angular
Sottoscrizione agli eventi sul contenitore in JavaScript
Le novità di Angular: i miglioramenti alla CLI
Effettuare chiamate con versioning da Blazor ad ASP.NET Core
Disabilitare automaticamente un workflow di GitHub
Code scanning e advanced security con Azure DevOps
Effettuare il deploy di immagini solo da container registry approvati in Kubernetes
Sfruttare al massimo i topic space di Event Grid MQTT
Sviluppare un'interfaccia utente in React con Tailwind CSS e Preline UI