Filtruj, a następnie mapuj
Część sekcji Podstawy ścieżki React w Coddy. Lekcja 37 z 42.
Metody tablicy można łączyć, a filter przed map renderuje tylko wybrane elementy:
const numbers = [1, 2, 3, 4, 5, 6];
{numbers
.filter((n) => n % 2 === 0)
.map((n) => <li key={n}>{n}</li>)}
// renderuje: 2, 4, 6filter zachowuje elementy, dla których warunek jest prawdziwy; map przekształca pozostałe elementy. Wyniki wyszukiwania, nieprzeczytane wiadomości, ukończone zadania. Każda funkcja „pokaż tylko…” w internecie działa właśnie w ten sposób.
Wyzwanie
ŚredniPokaż tylko niedrogie produkty ze sklepu.
- Wewnątrz
<ul id="cheap-list">wyrenderuj jeden element<li>dla każdej ceny z tablicy, która jest niższa niż 10: najpierw użyj filter, a potem map. - Każdy element
<li>wyświetla cenę i używa jej jako klucza.
Spróbuj swoich sił
<!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>
Sprawdź sięTa lekcja zawiera krótki quiz. Zacznij lekcję, żeby na niego odpowiedzieć i śledzić swoje postępy.
Wszystkie lekcje w sekcji Podstawy
1Poznaj React
Czym jest React?Twój pierwszy komponentZasada jednego rodzicaJSX to nie HTMLPodsumowanie: poznaj React4Props
Czym są propsy?Przekazywanie propsówDwa propsyTen sam komponent, nowe daneProp childrenPodsumowanie: propsy7Warunki i listy
Renderowanie warunkowe operatorem trójargumentowymWyświetlanie za pomocą &&Renderowanie listyKlucze mają znaczenieFiltruj, a następnie mapujPodsumowanie: warunki i listy