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:
array.filter(callback(element, index, array), thisArg)
- callback: Một hàm sẽ chạy cho mỗi phần tử của mảng.
- element: Phần tử hiện tại đang được xử lý.
- index (tùy chọn): Vị trí của phần tử hiện tại.
- array (tùy chọn): Mảng gốc mà hàm đang xử lý.
- thisArg (tùy chọn): Giá trị được sử dụng làm
this
bên trong hàm callback.
2. Ví dụ cơ bản về filter
trong React
Giả sử bạn có một danh sách các sinh viên, và bạn chỉ muốn hiển thị những sinh viên có điểm trung bình lớn hơn 8.
import React from "react";
const students = [
{ id: 1, name: "Nguyễn Văn A", score: 7.5 },
{ id: 2, name: "Trần Thị B", score: 9.0 },
{ id: 3, name: "Lê Văn C", score: 8.2 },
{ id: 4, name: "Phạm Thị D", score: 6.8 },
];
function StudentList() {
const highScoreStudents = students.filter((student) => student.score > 8);
return (
<div>
<h2>Danh sách sinh viên có điểm trên 8:</h2>
<ul>
{highScoreStudents.map((student) => (
<li key={student.id}>
{student.name} - {student.score}
</li>
))}
</ul>
</div>
);
}
export default StudentList;
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.
import React, { useState } from "react";
const students = [
{ id: 1, name: "Nguyễn Văn A", score: 7.5 },
{ id: 2, name: "Trần Thị B", score: 9.0 },
{ id: 3, name: "Lê Văn C", score: 8.2 },
{ id: 4, name: "Phạm Thị D", score: 6.8 },
];
function StudentSearch() {
const [searchTerm, setSearchTerm] = useState("");
const filteredStudents = students.filter((student) =>
student.name.toLowerCase().includes(searchTerm.toLowerCase())
);
return (
<div>
<input
type="text"
placeholder="Tìm sinh viên..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
<ul>
{filteredStudents.map((student) => (
<li key={student.id}>
{student.name} - {student.score}
</li>
))}
</ul>
</div>
);
}
export default StudentSearch;
Trong ví dụ này:
useState
được dùng để lưu trữ từ khóa tìm kiếm.
- Hàm
filter
được sử dụng để lọc sinh viên dựa trên từ khóa nhập từ ô tìm kiếm.
toLowerCase()
giúp chuyển tất cả ký tự về dạng chữ thường, để phép so sánh không phân biệt chữ hoa hay chữ thường.
4. Kết hợp với API hoặc dữ liệu không đồng bộ
Nếu bạn lấy dữ liệu từ API và muốn lọc dựa trên phản hồi từ máy chủ, bạn có thể sử dụng filter sau khi đã nhận dữ liệu.
Ví dụ giả sử bạn nhận dữ liệu từ một API và chỉ muốn hiển thị những sản phẩm có giá dưới 100:
import React, { useState, useEffect } from "react";
function ProductList() {
const [products, setProducts] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetch("https://fakestoreapi.com/products")
.then((res) => res.json())
.then((data) => {
setProducts(data);
setLoading(false);
});
}, []);
const affordableProducts = products.filter((product) => product.price < 100);
if (loading) return <p>Đang tải...</p>;
return (
<div>
<h2>Sản phẩm giá dưới 100:</h2>
<ul>
{affordableProducts.map((product) => (
<li key={product.id}>
{product.title} - ${product.price}
</li>
))}
</ul>
</div>
);
}
export default ProductList;
Ở 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ả.