Lọc rồi ánh xạ

Thuộc phần Kiến thức cơ bản trong hành trình React của Coddy. Bài học 37 trên 42.

Các phương thức của mảng có thể kết hợp với nhau, và filter trước map sẽ chỉ hiển thị những phần tử bạn muốn:

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

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

filter giữ lại những mục có điều kiện đúng; map biến những mục còn lại thành các phần tử. Kết quả tìm kiếm, tin nhắn chưa đọc, việc cần làm đã hoàn thành. Mọi tính năng «chỉ hiển thị…» trên web đều hoạt động theo chuỗi này.

Thử thách

Trung bình

Chỉ hiển thị các mặt hàng giá rẻ của cửa hàng.

Bên trong <ul id="cheap-list">, hãy tạo một <li> cho mỗi giá trong mảng nhỏ hơn 10: lọc trước, sau đó ánh xạ.
Mỗi <li> hiển thị giá và dùng giá đó làm khóa.

Tự làm thử

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