Filter, lalu map

Termasuk bagian Dasar-Dasar dalam perjalanan React di Coddy. Pelajaran 37 dari 42.

Method array dapat dirangkai, dan filter sebelum map hanya menampilkan item yang kamu inginkan:

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

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

filter mempertahankan item yang kondisinya bernilai true; map mengubah item yang tersisa menjadi elemen. Hasil pencarian, pesan yang belum dibaca, todo yang sudah selesai. Setiap fitur "tampilkan hanya…" di web menggunakan rangkaian ini.

Tantangan

Sedang

Tampilkan hanya barang-barang murah di toko.

Di dalam <ul id="cheap-list">, tampilkan satu <li> untuk setiap harga dalam array yang kurang dari 10: filter terlebih dahulu, lalu map.
Setiap <li> menampilkan harga dan menggunakannya sebagai key.

Coba sendiri

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