How To Implement Multiple Filters In React ?

Applying Filters in React applications is important for enhancing user experience by allowing users to customize the displayed content based on their preferences. In this article, we will explore two approaches to implementing Multiple Filters in React.

Table of Content

Using State Hooks
Using Context API for Global State

Prerequisites:

Steps to Setup a React App

Step 1: Create a ReactJS application by using this command.

npx create-react-app myapp

Step 2: Navigate to the project directory

cd myapp

Project Structure:

The updated dependencies in package.json file will look like:

"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
}

Using State Hooks

In this approach, we are using React's state hooks (useState) to manage filters for a list of courses. The filterFn function updates the filters based on user selections, and filteredCourses uses these filters to display only the courses that match the selected category and level.

Example: The below example uses State Hooks to Implement Multiple Filters In React.

JavaScript

import React, {
    useState,
    useContext,
    createContext
} from 'react';
const FilterContext = createContext();
const App = () => {
    const [filters, setFilters] = useState({
        category: '',
        level: '',
        price: '',
    });
    const handleFilterChange = (e) => {
        const { name, value } = e.target;
        setFilters((prevFilters) => ({
            ...prevFilters,
            [name]: value,
        }));
    };
    const courses = [
        {
            id: 1,
            title: 'React Basics',
            category: 'Frontend',
            level: 'Beginner',
            price: "1200"
        },
        {
            id: 2,
            title: 'Node.js Fundamentals',
            category: 'Backend',
            level: 'Intermediate',
            price: "2000"
        },
        {
            id: 3,
            title: 'Data Structures in Python',
            category: 'Data Science',
            level: 'Advanced',
            price: "3000"
        },
        {
            id: 4, title: 'Machine Learning Fundamentals',
            category: 'Data Science',
            level: 'Intermediate',
            price: "1800"
        },
        {
            id: 5,
            title: 'Java Programming',
            category: 'Backend',
            level: 'Beginner',
            price: "1000"
        },
        {
            id: 6,
            title: 'HTML & CSS Basics',
            category: 'Frontend',
            level: 'Beginner',
            price: "1000"
        },
        {
            id: 7,
            title: 'Database Management with SQL',
            category: 'Backend',
            level: 'Intermediate',
            price: "3000"
        },
        {
            id: 8,
            title: 'Algorithms & Data Structures in C++',
            category: 'Data Science',
            level: 'Advanced',
            price: "2000"
        },
        {
            id: 9,
            title: 'Web Development with React',
            category: 'Frontend',
            level: 'Intermediate',
            price: "1800"
        },
        {
            id: 10,
            title: 'Python for Data Analysis',
            category: 'Data Science',
            level: 'Advanced',
            price: "1000"
        },
    ];
    const filteredCourses = courses.filter((course) => {
        return (
            (filters.category === '' ||
                course.category === filters.category) &&
            (filters.level === '' ||
                course.level === filters.level) &&
            (filters.price === '' ||
                course.price === filters.price)
        );
    });
    return (
        <FilterContext.Provider value={{
            filters, handleFilterChange
        }}>
            <div style={{ padding: '20px' }}>
                <h1 style={{ color: 'green' }}>GeeksforGeeks</h1>
                <h3>Using Context API for Global State</h3>
                <FilterControls />
                <ul>
                    {filteredCourses.map((course) => (
                        <li key={course.id}>
                            {course.title} - {course.category}
                            ({course.level}) - {course.price}
                        </li>
                    ))}
                </ul>
            </div>
        </FilterContext.Provider>
    );
};
const FilterControls = () => {
    const { filters, handleFilterChange } = useContext(FilterContext);
    return (
        <div style={{ marginBottom: '10px' }}>
            <select name="category"
                value={filters.category}
                onChange={handleFilterChange}
                style={{ marginRight: '10px' }}>
                <option value="">All Categories</option>
                <option value="Frontend">Frontend</option>
                <option value="Backend">Backend</option>
                <option value="Data Science">Data Science</option>
            </select>
            <select name="level" value={filters.level}
                onChange={handleFilterChange}
                style={{ marginRight: '10px' }}>
                <option value="">All Levels</option>
                <option value="Beginner">Beginner</option>
                <option value="Intermediate">Intermediate</option>
                <option value="Advanced">Advanced</option>
            </select>
            <select name="price" value={filters.price}
                onChange={handleFilterChange}>
                <option value="">All Prices</option>
                <option value="₹1000">₹1000</option>
                <option value="₹1200">₹1200</option>
                <option value="₹1500">₹1500</option>
                <option value="₹1800">₹1800</option>
                <option value="₹2000">₹2000</option>
                <option value="₹2200">₹2200</option>
                <option value="₹2500">₹2500</option>
            </select>
        </div>
    );
};
export default App;

Step to Run Application: Run the application using the following command from the root directory of the project

npm start

Output: Your project will be shown in the URL http://localhost:3000/

Using Context API for Global State

In this approach, we are using React's Context API for global state management to handle multiple filters (category, level, price) in a React application. The FilterContext provides a centralized place to manage and update filter states across components, enhancing reusability and scalability in filter functionality.

Example: The below example uses Context API for Global State to Implement Multiple Filters In React.