Erst filtern, dann mappen

Teil des Abschnitts Grundlagen der React-Journey von Coddy — Lektion 37 von 42.

Array-Methoden lassen sich verketten, und filter vor map renders nur die Elemente, die Sie möchten:

const numbers = [1, 2, 3, 4, 5, 6];

{numbers
    .filter((n) => n % 2 === 0)
    .map((n) => <li key={n}>{n}</li>)}
// rendert: 2, 4, 6

filter behält die Elemente, für die die Bedingung wahr ist; map verwandelt die Überlebenden in Elemente. Suchergebnisse, ungelesene Nachrichten, erledigte To-dos. Jede „Zeige nur…“-Funktion im Web ist genau diese Kette.

Aufgabe

Mittel

Zeige nur die erschwinglichen Artikel des Shops an.

Rendere innerhalb von <ul id="cheap-list"> ein <li> pro Preis im Array, der unter 10 liegt: filtere zuerst, nutze dann map.
Jedes <li> zeigt den Preis und verwendet ihn als key.

Probier es selbst

<!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>