Here's how I did it:https://codesandbox.io/s/elastic-pateu-flwqvp?file=/components/Selectors.js

I abstracted the selection logic into auseSelection()custom hook, which means the current selection can be found instore[key].selected, wherekeycan be any key ofselectors.

items,selected,setSelectedandsectionLabelare stored in eachuseSelection()call Instore[key], and passed to acomponent.

The relevant part is thehandleCheckfunction within this component, which sets the new selection based on the previously selected value: if the currentitemis contained within the previouslyselectedvalue, remove it. Otherwise, add it.

---

More detailed explanation (why)

Looking closely at your code, it seems like you are confused about how the checkbox component works in React.

The

checkedattribute ofinputis controlled by abooleanstate. Generic example:

const Checkbox = ({ label }) => { const [checked, setChecked] = useState(false) return (   setChecked(!checked)} /> {label}  ) }

On each render, thecheckedvalue ofis set based on the current value of thecheckedstate. When the enteredcheckedchanges (during user interaction), the status is not automatically updated. But theonChangeevent is fired and we use it to update the state to the negative value of the state's previous value.

---

When dealing with thecomponent,wecannotuse a single boolean value to controlallcheckboxes, we need to set a boolean value for each checkboxbeing rendered. So we create aselectedarray and set thecheckedvalue of eachtoselected.includes(item) The value of(returns aboolean).

In order for this to work, we need to update the value of the

selectedarray in everyonChangeevent. We check ifitemis contained in the previous version ofselected. If present, filter it out. If it doesn't exist, add it:

const CheckboxList = ({ items }) => { const [selected, setSelected] = useState([]) const onChecked = (item) => setSelected((prev) => prev.includes(item) ? prev.filter((val) => val !== item) : [...prev, item] ) return items.map((item) => (   onChecked(item)} /> {item}  )) }

Hope this solves some problems.

You need to create specific handleOnChange function for each group. I have created a similar function for the Genre checkbox group and you can create it for other groups in the same way.

This is the processing function.

const handleOnChangeGenre = (e) => { let newValArr = []; if (e.target.checked) { newValArr = [...state.pillarGenre.split(","), e.target.value]; } else { newValArr = state.pillarGenre .split(",") .filter((theGenre) => theGenre.trim() !== e.target.value); } setState({ ...state, pillarGenre: newValArr.join(",") }); };

Pass this function to CustomCheckboxGroup as the handleOnChange attribute as shown below.

For testing, comment out your handleOnChange function.

See the complete working solution in the sandbox -Complete code