Check/uncheck all checkbox implementation - reactjs

Question

I am trying to accomplish a checkbox list with an All functionality. The "ALL" toggle works to turn all the checkboxs from the list on/off. But once i try to toggle off the "ALL" checkbox once i unselect another item from the list, it doesnt work as expected, as it does not toggle off the item i selected. I used logs to see the behavior, and once the "ALL" logic kicks in, it appears that the whole list gets rerender and triggers the onChange with the new values. Any help is appreciate it
interface ContainerProps {
name: string;
flag: boolean;
}
const initList: ContainerProps[] = [
{name: "ALL", flag: false},
{name: "First item", flag: false},
{name: "Second item", flag: false},
{name: "Third item", flag: false},
{name: "Fourth item", flag: false},
]
const PodCounter: React.FC = () => {
const [propsList, setList] = useState(initList)
const onClick = (value: string, check: boolean) => {
const tempList = [...propsList]
if (value === "ALL" && check === true) {
tempList.forEach(function(item){
item.flag = check
})
} if (value != "ALL" && tempList[0].flag === true && check === false){
tempList[0].flag = check
}else {
tempList.forEach(function(item){
if (item.name === value){
item.flag = check
}
})
}
console.log("tempList", tempList)
setList(tempList)
}
return (
<IonList>
{propsList.map((obj, index)=>(
<IonItem key={index}>
<IonLabel>{obj.name}</IonLabel>
<IonCheckbox slot="end" value={obj.name} checked={obj.flag} onIonChange={e => onClick(e.detail.value, e.detail.checked)}></IonCheckbox>
</IonItem>
))}
</IonList>
);
};
This is what the app/console looks like when i clicked the "ALL" checkbox

Answer 1

You may separate "check/uncheck all" logic from the rest of your components and keep your app more SOLID, if I may say so:
const { useState } = React,
{ render } = ReactDOM,
rootNode = document.getElementById('root')
const Checkbox = ({value, checked, label, onChange}) => {
return (
<label>
<input type="checkbox" {...{value, checked, onChange}} />
{label}
</label>
)
}
const CheckOptions = ({options}) => {
const allUnset = options.reduce((acc, {value}) =>
({...acc, [value]: false}), {})
const allSet = options.reduce((acc, {value}) =>
({...acc, [value]: true}), {})
const [checkedOptions, setCheckedOptions] = useState(allUnset)
const toggleOption = value =>
setCheckedOptions({...checkedOptions, [value]: !checkedOptions[value]})
const toggleAll = () => {
const isAnythingChecked = Object.values(checkedOptions).some(Boolean)
isAnythingChecked
? setCheckedOptions(allUnset)
: setCheckedOptions(allSet)
}
return !!options.length && (
<ul>
{
options.map(({value, label}) => (
<li>
<Checkbox
key={value}
checked={checkedOptions[value]}
onChange={() => toggleOption(value)}
{...{value, label}}
/>
</li>
))
}
<li>
<Checkbox
value="all"
checked={Object.values(checkedOptions).some(Boolean)}
onChange={toggleAll}
label="ALL"
/>
</li>
</ul>
)
}
const options = [{value: 'a', label: 'Option A'}, {value: 'b', label: 'Option B'}, {value: 'c', label: 'Option C'}]
render (
<CheckOptions options={options} />,
rootNode
)
ul {
list-style-type: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><div id="root"></div>