Design comparison
Solution retrospective
Hello Everyone!
This is my first experience on handling multiple inputs for filtering, this application has 3 filter inputs. I created a function called handleFilterJobs, this function first checks to see if all inputs are empty, if so then when the search button is pressed, it will show all the jobs. The 'filtered' variable uses the filter method to apply the filtering logic based on the user inputs. The jobs that meet the search and filtering criteria are set in the filteredData state and displayed for the user.
const handleFilterJobs = (filterOptions) => {
const { search, location, checkbox } = filterOptions;
if (!search && !location && !checkbox) {
setFilterData(jobs);
return;
}
const filtered = jobs.filter((job) => {
const companyMatch = job.company.toLowerCase().includes(search.toLowerCase());
const titleMatch =
job.position.toLowerCase().includes(search.toLowerCase()) && !companyMatch;
const locationMatch = job.location.toLowerCase().includes(location.toLowerCase());
const isFullTime = checkbox ? job.contract === "Full Time" : true;
return (companyMatch || titleMatch) && (locationMatch || !location) && isFullTime;
});
setFilterData(filtered);
};
If there is a better or different method in filtering data based on multiple user inputs, I would be grateful to hear them as this is an important feature for many applications.
If you spot any bugs or errors on the live application feel free to give some feedback.
Happy Coding!
Community feedback
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord