I'm currently working on a filter component where multiple checkboxes can be selected.
Now I want to toggle the state of the checkboxes (which is currently possible and works) and store the checked checkboxes in an array.
If a checkbox is unchecked, it should of course be removed from the array. I've tried the useState hook, but without success --> The checkboxes are added multiple times and the unchecked ones are not removed..
Here is the current status:
// Here I'm creating an array with a fixed size (based on the received data)
const [checkboxState, setCheckboxState] = useState(new Array(receivedData.length).fill(false));
// With this useState I wan't to collect the checked checkboxes
const [checkedCheckboxes, setCheckedCheckboxes] = useState([]);
// This is my handler method that gets triggered when a checkbox get's checked/unchecked
// ..and toggles the state of the checkbox
const handleCheckboxState = (position: number) => {
const updatedCheckedState = checkboxState.map((item, index) => (index === position ? !item : item));
setCheckboxState(updatedCheckedState);
collectCheckedCheckboxes();
};
// With this method I wan't to push the checked checkboxes into the array
// ..and remove the unchecked ones
const collectCheckedCheckboxes = () => {
checkboxState.map((item, index) => {
if (item === true) {
return checkedCheckboxes.push(receivedData[index]);
} else {
return checkedCheckboxes.slice(index, 1);
}
});
};
The checkboxes are rendered like this:
<div className="checkboxes">
{receivedData?.map((data, index) => (
<CheckBox
value={data.value}
checked={checkboxState[index]}
onChange={() => handleCheckboxState(index)}
/>
))}
</div>
What am I doing wrong?
Your CheckBox-component does not contain a key property. This is helpful for React to identify which items have changed, are added, or are removed.
Source: https://reactjs.org/docs/lists-and-keys.html
I also do not understand why you have two states, checkboxState and checkedCheckboxes. Is there another reason for this? I think this would be easier with a single state which holds the indexes (or values) of the checked checkboxes.
[update after comments]
The code below is the desired solution by OP to have the selected object values in a React state.
const { useState } = React;
const Checkboxes = () => {
// With this useState I wan't to collect the checked checkboxes
const [checkedCheckboxes, setCheckedCheckboxes] = useState([]);
// This is my handler method that gets triggered when a checkbox get's checked/unchecked
// ..and toggles the state of the checkbox
const handleCheckboxChange = (data) => {
const isChecked = checkedCheckboxes.some(checkedCheckbox => checkedCheckbox.value === data.value)
if (isChecked) {
setCheckedCheckboxes(
checkedCheckboxes.filter(
(checkedCheckbox) => checkedCheckbox.value !== data.value
)
);
} else {
setCheckedCheckboxes(checkedCheckboxes.concat(data));
}
};
const receivedData = [{ value: "A" }, { value: "B" }, { value: "C" }];
return (
<>
<div className="checkboxes">
<h1>Checkboxes:</h1>
{receivedData?.map((data, index) => (
<input
key={`cb-${index}`}
value={data.value}
type="checkbox"
checked={checkedCheckboxes.some(checkedCheckbox => checkedCheckbox.value === data.value)}
onChange={() => handleCheckboxChange(data)}
/>
))}
</div>
<div>
<h1>State:</h1>
<pre>{JSON.stringify(checkedCheckboxes, null, 2)}</pre>
</div>
</>
);
};
ReactDOM.render(<Checkboxes />, document.getElementById("app"));