Filtrar y luego mapear

Parte de la sección Fundamentos del Journey de React de Coddy — lección 37 de 42.

Los métodos de array se encadenan, y filter antes de map renders solo los elementos que deseas:

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

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

filter mantiene los elementos donde la condición es verdadera; map convierte los sobrevivientes en elementos. Resultados de búsqueda, mensajes no leídos, tareas completadas. Cada función de "mostrar solo..." en la web es esta cadena.

Desafío

Intermedio

Muestra solo los artículos asequibles de la tienda.

Dentro de <ul id="cheap-list">, haz render de un <li> por cada precio del array que esté por debajo de 10: usa filter primero, después map.
Cada <li> muestra el precio y lo utiliza como la key.

Pruébalo tú mismo

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