I want to update the filterCandidates array
based on the total experience of the candidate when the selected checkbox is checked and remove the candidate data from the array when unchecked, below is the code snippet
import { useState } from "react";
function ExperienceFilter({ candidates }) {
const [filteredCandidates, setFilteredCandidates] = useState([]);
const experienceOptions = [
{ value: "1-2", label: "1-2 Years" },
{ value: "3-4", label: "3-4 Years" },
{ value: "5-6", label: "5-6 Years" },
{ value: "7-8", label: "7-8 Years" },
{ value: "9-10", label: "9-10 Years" },
];
function handleChange(e) {
const { value, checked } = e.target;
const experiencedCandidates = candidates.filter(
(candidate) => candidate.totalExperience == value
);
if (checked) {
setFilteredCandidates([...filteredCandidates, experiencedCandidates]);
}
if (!checked) {
setFilteredCandidates((prev) => prev.totalExperience != value);
}
}
return (
<div>
<div class="flex flex-col space-y-3 bg-green-600 px-5 pr-20 py-10">
<div>Years of Experience</div>
{experienceOptions.map((option, index) => (
<label key={index}>
<input
type="checkbox"
value={option.value}
name={option.label}
onChange={handleChange}
/>
{option.label}
</label>
))}
</div>
</div>
);
}
export default ExperienceFilter;