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:

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ả.

• ReactJS