React - dynamically create select all checkboxes - reactjs

Question

There has been a number of questions on React checkboxes. This answer is pretty good, and it helps to modularize the idea of select-all checkboxes in React.
Now, I have a problem. I have a dictionary like this:
{
regionOne: {
subareaOne,
subareaTwo,
subareaThree,
subareaFour
},
regionTwo: {
subareaFive,
subareaSix
}
}
Here, each region is mapped to an arbitrary number of sub areas, which I do not know beforehand.
I want to create checkboxes such that each region and each subarea has a checkbox, and each region's checkbox acts as a select-all/de-select all for all the subareas it is mapped to. That is, something like this:
So, when you click on the checkbox for regionOne, the checkboxes for subareaOne, subareaTwo, subareaThree and subareaFour should all be checked as well, but not those in regionTwo.
I think I can adapt this answer, but its getInitialState function assumes that you know how many children checkboxes there are.
Any idea on how to do this in an elegant method? I am now considering initialising the checkboxes dynamically using mapping, but I am not sure...VanillaJS would have been much simpler >.<

Answer 1

I actually went ahead and implemented it anyway. There are two components involved, a parent CheckboxGroup component, and a child StatelessCheckbox component.
Here is the parent component:
import React from 'react';
import { StatelessCheckbox } from './StatelessCheckbox';
export class CheckboxGroup extends React.Component {
constructor(props) {
super(props);
this.state = {
checked: false,
boxes: {},
disabled: false
};
}
componentDidMount() {
const { boxes, boxId, disabled } = this.props;
let boxesState = {};
boxes.map(box => {
boxesState[box[boxId]] = false;
});
this.setState({ checked: false, boxes: boxesState, disabled: disabled });
}
handleSelectAll(event) {
const isChecked = event.target.checked;
let boxesState = {};
Object.keys(this.state.boxes).map(box => {
boxesState[box] = isChecked;
});
this.setState({ checked: isChecked, boxes: boxesState });
}
handleSelect(event) {
const isChecked = event.target.checked;
const boxId = event.target.value;
let newBoxes = {};
Object.assign(newBoxes, this.state.boxes);
newBoxes[boxId] = isChecked;
// Check parent checkbox if all children boxes are checked
const checkedBoxes = Object.keys(newBoxes).filter((box) => {
return newBoxes[box] === true;
});
const parentIsChecked = (checkedBoxes.length === Object.keys(newBoxes).length);
this.setState({ checked: parentIsChecked, boxes: newBoxes });
}
render() {
const {
passDataToParent=(() => { return false; }),
groupClassName='',
headClassName='',
headName='',
headBoxClass='',
headLabelClass='',
headLabelText='',
bodyClassName='',
bodyName='',
bodyBoxClass='',
bodyLabelClass='',
boxes,
boxId,
boxLabel
} = this.props;
return (
<div className="row">
<div className={ groupClassName }>
<div className={ headClassName }>
<StatelessCheckbox name={ headName } className={ headBoxClass }
labelClass={ headLabelClass } labelText={ headLabelText }
checked={ this.state.checked } value={ headName }
passedOnChange={ (e) => { this.handleSelectAll(e); } } />
</div>
<div className={`row ${ bodyClassName }`}>
{ boxes.map(box => (
<div key={ box[boxId] }>
<StatelessCheckbox name={ bodyName } className={ bodyBoxClass }
labelClass={ bodyLabelClass } labelText={ box[boxLabel] }
checked={ this.state.boxes[box[boxId]] } value={ box[boxId] }
passedOnChange={ (e) => { this.handleSelect(e); } } />
</div>
))}
</div>
</div>
</div>
);
}
}
and here is the child component:
import React from 'react';
/**
* Implements a React checkbox as a stateless component.
*/
export class StatelessCheckbox extends React.Component {
constructor(props) {
super(props);
}
render() {
const {
passedOnChange=(() => { return false; }),
className='',
name='',
labelClass='',
labelText='',
value='',
checked=false,
} = this.props;
return (
<label className={`for-checkbox ${ className }`} tabIndex="0">
<input onChange={(e) => passedOnChange(e) }
checked={ checked } type="checkbox"
name={ name } value={ value } />
<span className={`label ${ labelClass }`}>{ labelText }</span>
</label>
);
}
}
Things to note:
the child component is a stateless component in this case, used purely for rendering
the parent component (CheckboxGroup) maintains the state for all the child components as well so there is still a single source of truth as per React philosophy
boxes in properties is a list of the children checkboxes in each parent CheckboxGroup, and boxes in the parent state holds the state for each child checkbox

Answer 2

Something like that?
onSelect(id) {
let allElms = Object.assign({}, retriveElmentsSomehow());
let elm = findTheElm(id, allElms);
updateSelected(elm, !elm.selected);
// Then update state with new allElms
}
updateSelected(elm, selectedOrNot) {
elm.selected = selectedOrNot;
if (elm.children) {
elm.children.foreach(c => onSelect(c, selectedOrNot));
}
}
Where elements are in state or redux store.