Filter Checkbox issue in react js - reactjs

Question

This is my code for the category filter. I used this in all places.
{categapi.map((data, index) => (
<Form.Check
onChange={props.handleSingleCheck }
key={index}
name={data.category_id}
label={data.category_name}
type="checkbox"
id={data.category_name}
/>
))}
It's the function for the handle the checkbox.
const handleSingleCheck = (e) => {
if (e.target.checked == true) {
const { name } = e.target;
isChecked.push(name);
console.log(isChecked);
setIsChecked([...isChecked]);
} else {
let index = isChecked.indexOf(e.target.name);
isChecked.splice(index, 1);
}
catfilter();
};
when selecting two categories it is selected. But when I click the more button it opens the modal but the selected items are disabled in the modal.
When clicking on the checkbox it needs to check both inside the modal and outside the modal. How to do this?

Answer 1

In your handleSingleCheck function you are pushing the values and slicing the state variable isChecked directly. Which is the wrong way to interact with react state. Learn more here (you should treat the state variables as if they were immutable)
Change your handleSingleCheck logic as follows:
const handleSingleCheck = (e) => {
let isCheckedCopy = [...isChecked] // create a local variable
if (e.target.checked == true) {
const { name } = e.target;
isCheckedCopy.push(name) // push the data into local mutable array
} else {
let index = isCheckedCopy.indexOf(e.target.name);
isCheckedCopy.splice(index, 1); // slice the mutable array
}
console.log(isCheckedCopy);
setIsChecked([...isCheckedCopy]); // change isChecked state through setIsChecked(...)
catfilter();
};