I would like to filter data based on pressing multiple checkbox buttons. Currently only the most recently pressed button works and shows the output instead of also showing outputs from other buttons which are pressed as well.
The state of checkbox buttons works correctly i.e. when clicked it is true, when unclicked it is false - however I am not sure how to connect it with my find
function which fetches the data.
const Checkbox = ({ type = "checkbox", name, checked = false, onChange }) => {
return (
<input
type={type}
name={name}
checked={checked}
onChange={onChange}
/>
);
};
const [checkedItems, setCheckedItems] = useState({}); //plain object as state
const handleChange = (event) => {
// updating an object instead of a Map
setCheckedItems({
...checkedItems,
[event.target.name]: event.target.checked,
});
find(event.target.name)
};
useEffect(() => {
console.log("checkedItems from UseEffect: ", checkedItems); }, [checkedItems]);
const checkboxes = [
{
name: "đ€”♀️ Finance",
key: "financeKey",
label: "financeLabel",
},
{
name: "đ©đš Marketing",
key: "marketingKey",
label: "marketingLabel",
},
{
name: "đšđŒ Sales",
key: "salesKey",
label: "salesLabel",
},
];
<label>
{checkedItems["check-box-1"]}{" "}
{/* Checked item name : {checkedItems["check-box-1"]}{" "} */}
</label>{" "}
<br />
{checkboxes.map((item) => (
<label key={item.key}>
{item.name}
<Checkbox
name={item.name}
checked={checkedItems[item.name]}
onChange={handleChange}
/>
</label>
))}
The function below fetches data from database
const find = (query, by) => {
JobDataService.find(query, by)
.then((response) => {
setJobs(response.data.jobs);
setPages(response.data.totalPages);
})
.catch((e) => {
console.log(e);
});
};
Aucun commentaire:
Enregistrer un commentaire