Filtrele, Sonra Eşle (Map)

Coddy'nin React Journey'sinin Temeller bölümünün bir parçası — ders 37 / 42.

Dizi metotları zincirlenebilir ve map işleminden önce filter kullanmak yalnızca istediğiniz öğeleri render eder:

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

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

filter, koşulun doğru olduğu öğeleri tutar; map ise kalan öğeleri elemanlara dönüştürür. Arama sonuçları, okunmamış mesajlar, tamamlanmış yapılacaklar. Web'deki her "yalnızca göster..." özelliği bu zincirden ibarettir.

Görev

Orta

Sadece mağazanın uygun fiyatlı ürünlerini gösterin.

<ul id="cheap-list"> içinde, dizideki fiyatı 10'un altında olan her bir fiyat için bir <li> render edin: önce filter yapın, sonra map yapın.
Her <li> fiyatı gösterir ve bunu key olarak kullanır.

Kendin dene

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