Filtra, poi mappa
Fa parte della sezione Fondamenti del percorso React di Coddy. Lezione 37 di 42.
I metodi degli array si concatenano e filter prima di map restituisce solo gli elementi che vuoi:
const numbers = [1, 2, 3, 4, 5, 6];
{numbers
.filter((n) => n % 2 === 0)
.map((n) => <li key={n}>{n}</li>)}
// visualizza: 2, 4, 6filter mantiene gli elementi per cui la condizione è vera; map trasforma gli elementi rimasti in elementi. Risultati di ricerca, messaggi non letti, attività completate. Ogni funzione "mostra solo…" sul web è questa catena.
Sfida
MedioMostra solo gli articoli economici del negozio.
- All'interno di
<ul id="cheap-list">, visualizza un<li>per ogni prezzo nell'array che è inferiore a 10: prima filtra, poi mappa. - Ogni
<li>mostra il prezzo e lo usa come chiave.
Provalo tu
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="main.jsx"></script>
</body>
</html>
Mettiti alla provaQuesta lezione include un breve quiz. Inizia la lezione per rispondere e tenere traccia dei tuoi progressi.
Tutte le lezioni di Fondamenti
1Alla scoperta di React
Che cos’è React?Il tuo primo componenteLa regola dell’unico elemento genitoreJSX non è HTMLRiepilogo: alla scoperta di React4Props
Cosa sono le props?Passare le propsDue propsStesso componente, nuovi datiLa prop childrenRiepilogo: props7Condizioni e liste
Rendering ternarioMostrare con &&Renderizzare una listaLe key sono importantiFiltra, poi mappaRiepilogo: condizioni e liste2Espressioni JSX
Le parentesi graffeOperazioni matematiche tra parentesi graffeParentesi graffe negli attributiChiamare funzioni in JSXRiepilogo: espressioni JSX