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
Esecuzione condizionale dei template nelle pipeline YAML di Azure DevOps
Utilizzare una direttiva di Angular per limitare i caratteri inseribili in una textbox
Creare un radio button per Blazor
Produrre e condividere una variabile tra step in una pipeline YAML di Azure DevOps
Introdurre la security nelle best practice di (Azure) DevOps
Blazor: from 0 to SPA
ASP.NET Core 5 & Blazor 5
Creare layout consistenti grazie al Visual Material in Xamarin Forms
Modificare la modalità di esecuzione delle query con Include in Entity Framework Core 5
Graph API con .NET 5
Le novità di C# 9
The .NET 5 & C# 9 Show
I più letti di oggi
- Creare un record in C#
- Winget: un nuovo package manager per Windows
- Chiamare direttamente un numero di telefono con HTML5
- Attesa e validazione manuale nelle pipeline YAML di Azure DevOps
- il 18/02 c'è il #container & #devops day! https://aspit.co/ContainerDevOpsDay-21 Le iscrizioni sono sempre aperte e la Call For Paper è attiva fino al 28/01! #aspilive #cfp