How to use State Hooks In ReactJS
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.
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' }}>w3wiki</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 state hooks
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