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>