Usare map per visualizzare i dati all'interno di una matrice
Spesso ci si ritrova a usare raccolte di dati archiviati un una matrice. Anche se i dati di matrice vengono usati in modo simile a qualsiasi altro oggetto, è tuttavia necessario avere la possibilità di scorrere i dati e mostrarli all'utente. Questo risultato si ottiene in JSX usando codice JavaScript. In particolare, si usa la funzione map.
map consente di creare una copia modificata di una matrice. Questa funzione è utile se è necessario convertire i valori di una matrice a scopo di visualizzazione. Per mostrare i valori all'utente, è necessario incorporarli in un elemento HTML. La funzione map è ideale a questo scopo. Con map è possibile creare una nuova matrice costituita da codice HTML contenente i singoli valori della matrice originale per la visualizzazione.
Utilizzare map
Il comportamento di map è simile a quello di un ciclo for...of o del metodo forEach. La funzione viene eseguita una volta per ogni elemento nella matrice. La principale differenza è che genera una nuova matrice con i valori restituiti dalla funzione passata a map.
Verrà ora illustrato come usare map per creare una nuova matrice da una esistente con i numeri al quadrato. Per iniziare, creare una matrice di numeri.
const numbers = [2, 5, 8];
Usare quindi map. map accetta una funzione con un singolo parametro. Il parametro verrà impostato sul valore di ogni numero della matrice originale. A questo scopo verrà creata una funzione anonima usando la sintassi della funzione freccia =>.
const squared = numbers.map((number) => {
return number * number;
});
squared è una nuova matrice che contiene i numeri originali al quadrato. Se si usa console.log, verrà visualizzato quanto segue:
console.log(squared);
// Output: [4, 25, 64]
Accedere all'indice per generare una chiave
Quando si visualizzano gli elenchi in React, si imposta una chiave per ogni elemento. In questo modo è possibile fare riferimento ai singoli elementi visualizzati e correlarli nuovamente ai dati associati. Il modo più comune per generare una chiave consiste nell'usare l'indice dell'elemento nella matrice.
Se si usa un ciclo for, viene generato un indice in modo intrinseco come parte della sintassi. Se si usa map, è possibile accedere all'indice tramite un secondo parametro nella funzione di delegato. Il secondo parametro viene impostato automaticamente sull'indice corrente.
const squared = numbers.map((number, index) => {
console.log(`Processing item ${index + 1}`);
return number * number;
});
map con React
Come evidenziato in un esempio precedente, è possibile usare comunemente map per visualizzare un elenco di elementi. La principale differenza consiste nel fatto che, invece dei numeri, come nell'esempio, viene restituito codice JSX. Una delle linee guida di React richiede che tutti gli elementi visualizzati debbano avere una chiave. Se gli elementi da visualizzare non hanno una chiave naturale, in genere si usa l'indice. Ad esempio, per visualizzare i numeri al quadrato in elementi div, è possibile usare quanto segue:
const squared = numbers.map((number, index) => {
return (
<div key={index}>{ number * number }</div>
);
});
È possibile usare squared allo stesso modo delle altre variabili in JSX. Se si aggiunge { squared } a JSX altrove, verrà visualizzata la raccolta di elementi div con i numeri aggiornati.