React retrieve checked value in checkbox - reactjs

Question

I am trying to retrieve the checked values of the checkboxes and save them into array.
I tried :
arr.push(setNewItem(checked))
arr.push(e.target.value.checked)
arr.push(items.checked)
But these return type error or undefined values.
const [checkedItems, setCheckedItems] = useState([]);
const handleChange = (e) => {
if (e.target.checked) {
var arr = [...checkedItems];
//arr.push(setNewItem(e.target.value.checked));
setCheckedItems(arr);
console.log(arr);
} else {
checkedItems = "";
}
setIsChecked((current) => !current);
};
return (
<div className="App">
<StyleForm>
<StyleInput
type="text"
placeholder="Add"
value={newItem}
onChange={(e) => setNewItem(e.target.value)}
onKeyPress={handleOnKeyPress}
/>
<ButtonAddStyle onClick={() => addItem()}>add</ButtonAddStyle>
<StyleUl>
{items.map((item) => {
return (
<StyleLi key={item.id}>
<StyleCheckBox
type="checkbox"
value={isChecked}
onChange={handleChange}
/>
{item.value}
{""}
<ButtonDelStyle onClick={() => deleteItem(item.id)}>
X
</ButtonDelStyle>
</StyleLi>
);
})}
</StyleUl>
</StyleForm>
</div>
);

Answer 1

arr.push(e.target.checked);
Is the way to go and get rif of :
else {
checkedItems = "";
}
you cannot update a hook this way you will get an error when you try to unchek an input:
Uncaught TypeError : Assignment to constant variable
Now let's see what you are trying to do you are storing e.target.checked each time an input is cheked so checkedItems will look something like this :
[true, true, true, true, true, true, true, true]
why do you need this ? better is to store the ids of checked items :
const handleChange = (isChecked, id) => {
var arr = [...checkedItems];
if (isChecked) {
arr.push(id);
setCheckedItems(arr);
} else {
setCheckedItems(checkedItems.filter((storedId) => storedId !== id)); // delete the id from checkedItems if the corresponding input is unckecked
}
};
and from jsx :
<StyleCheckBox
type="checkbox"
value={item.id}
onChange={(e) => {
handleChange(e.target.checked, item.id);
}}
/>;
Now look at this :
<StyleCheckBox
value={isChecked} // this line
>
you are mapping through items creating multiple checkBoxes but all of them share the same value. and the value attribute of an input of type checkbox is not what you think it is, learn more here. so you can use value={item.id} to have an unique value for each input and get rid of isChecked useState hook you really don't need it

Answer 2

this could solve your problem.
const [checkedItems, setCheckedItems] = useState([]);
const handleChange = (e) => {
setCheckedItems( prev => [...prev, e.target.checked]);
setIsChecked((current) => !current);
};