Implementing a Dynamic Filter Option in a Web Application

[YashSmith]

If you want to add a dynamic filtering option in your web application, here’s a simple and effective solution using React. This filter allows users to search by keyword, set minimum and maximum values, and filter by category.

import React, { useState } from "react";

const DataFilter = ({ data }) => {
  const [filters, setFilters] = useState({
    keyword: "",
    minValue: "",
    maxValue: "",
    category: "",
  });

  const filteredData = data.filter((item) => {
    return (
      (filters.keyword === "" || item.name.toLowerCase().includes(filters.keyword.toLowerCase())) &&
      (filters.minValue === "" || item.value >= parseFloat(filters.minValue)) &&
      (filters.maxValue === "" || item.value <= parseFloat(filters.maxValue)) &&
      (filters.category === "" || item.category === filters.category)
    );
  });

  const handleChange = (e) => {
    setFilters({ ...filters, [e.target.name]: e.target.value });
  };

  return (
    <div>
      <h2>Filter Data</h2>
      <div>
        <label>Search:</label>
        <input type="text" name="keyword" value={filters.keyword} onChange={handleChange} />

        <label>Min Value:</label>
        <input type="number" name="minValue" value={filters.minValue} onChange={handleChange} />

        <label>Max Value:</label>
        <input type="number" name="maxValue" value={filters.maxValue} onChange={handleChange} />

        <label>Category:</label>
        <select name="category" value={filters.category} onChange={handleChange}>
          <option value="">All</option>
          <option value="A">Category A</option>
          <option value="B">Category B</option>
          <option value="C">Category C</option>
        </select>
      </div>

      <h3>Filtered Results:</h3>
      <ul>
        {filteredData.map((item) => (
          <li key={item.id}>{item.name} - {item.value}</li>
        ))}
      </ul>
    </div>
  );
};

export default DataFilter;

How This Works:
Search by keyword to filter specific results.
Set min/max value to filter within a range.
Select a category to refine results further.
The list updates dynamically as filters are applied.
This filtering functionality is lightweight, customizable, and can be used in any application that requires data filtration. Would you like any additional features, such as sorting or pagination?