Filter, Then Map

Part of the Fundamentals section of Coddy's React journey — lesson 37 of 42.

Array methods chain, and filter before map renders just the items you want:

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

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

filter keeps the items where the condition is true; map turns the survivors into elements. Search results, unread messages, completed todos. Every "show only…" feature on the web is this chain.

Challenge

Medium

Show the shop's affordable items only.

Inside <ul id="cheap-list">, render one <li> per price in the array that is under 10: filter first, then map.
Each <li> shows the price and uses it as the key.

Try it yourself

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