Filtrer, puis mapper

Fait partie de la section Les fondamentaux du Journey React de Coddy — leçon 37 sur 42.

Les méthodes de tableau se chaînent, et filter avant map renders seulement les éléments que vous souhaitez :

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

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

filter conserve les éléments pour lesquels la condition est vraie ; map transforme les survivants en éléments. Résultats de recherche, messages non lus, tâches terminées. Chaque fonctionnalité « afficher seulement… » sur le web repose sur cette chaîne.

Défi

Moyen

Affichez uniquement les articles abordables de la boutique.

À l'intérieur de <ul id="cheap-list">, affichez un <li> pour chaque prix du tableau qui est inférieur à 10 : utilisez filter d'abord, puis map.
Chaque <li> affiche le prix et l'utilise comme key.

Essayez vous-même

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