Job listing web app built with React and react router

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!