Hướng dẫn Filter trong ReactJS

Trong ReactJS, filter là một hàm thường được sử dụng để lọc dữ liệu trong mảng và hiển thị một tập hợp con thỏa mãn các điều kiện cụ thể. Hàm này giúp xử lý dữ liệu một cách dễ dàng và hiệu quả trong quá trình hiển thị các thành phần giao diện người dùng.

Dưới đây là các bước cơ bản để sử dụng hàm filter trong ReactJS:

1. Khái niệm cơ bản về hàm `filter`

Hàm filter là một hàm có sẵn trong JavaScript, hoạt động trên các mảng và trả về một mảng mới chỉ bao gồm các phần tử thỏa mãn điều kiện do bạn chỉ định.

Cú pháp:

this

Trong ví dụ trên:

students.filter(student => student.score > 8) lọc ra những sinh viên có điểm lớn hơn 8.
Hàm map được dùng để duyệt qua mảng đã lọc và hiển thị dữ liệu của từng sinh viên.

3. Sử dụng `filter` với dữ liệu động từ state

Trong các ứng dụng React thực tế, dữ liệu có thể được lưu trong state và sẽ thay đổi khi người dùng tương tác với giao diện.

Ví dụ: Tạo một danh sách tìm kiếm tên sinh viên dựa trên input của người dùng.

useState

Ở ví dụ này:

Dữ liệu sản phẩm được lấy từ API giả https://fakestoreapi.com/products.
Sau khi dữ liệu được tải, nó được lọc để chỉ hiển thị những sản phẩm có giá dưới 100.

5. Kết luận

Hàm filter trong ReactJS là một công cụ mạnh mẽ cho phép bạn lọc dữ liệu theo các tiêu chí cụ thể và hiển thị chúng trên giao diện người dùng. Khi kết hợp với các hàm khác như map, reduce, và sort, bạn có thể dễ dàng quản lý và hiển thị dữ liệu một cách hiệu quả.