Handling Multiple Checkboxes with Material UI and Formik - reactjs

Question

I have a form with a checkbox group containing 4 checkboxes within. I need to pass the value to my api on submit of button which is to be handled through Formik.
There are a few conditions on clicking a particular checkbox:
If Height is checked, rest all should be checked as well
If Breadth is checked, except for Height all should be checked
If Length is checked, Both Nos and Length should be checked
Nos can be checked or left unchecked
Currently I'm declaring individual states for all checkboxes and declaring individual functions for each of the conditions mentioned above.
Is there any other way to bind the values from the checkbox to Formik and pass to the api
State and Individual Functions:
const [nos, setNos] = useState(false);
const [length, setLength] = useState(false);
const [breadth, setBreadth] = useState(false);
const [height, setHeight] = useState(false);
const handleHeight = e => {
setNos(!nos);
setLength(!length);
setBreadth(!breadth);
setHeight(!height);
};
const handleBreadth = e => {
setNos(!nos);
setLength(!length);
setBreadth(!breadth);
};
const handleLength = e => {
setNos(!nos);
setLength(!length);
};
const handleNos = e =>{
setNos(!nos);
};
Form with Formik:
const formik = useFormik({
initialValues,
validationSchema,
onSubmit: async (values) => {
alert(JSON.stringify(values, null, 2));
},
});
return (
<>
<form
onKeyDown={onKeyDown}
id="newJobDetails"
name="newJobDetails"
onSubmit={formik.handleSubmit}
className={CommonClasses.formPartStyling}
style={{
height: SetFormSize(
isAdd ? "Add" : textFieldDisable ? "Info" : "Edit",
1
),
marginTop: marginTop || "none",
}}
>
<div
className={CommonClasses.headingTextOfForms}
style={{ marginLeft: "4%", marginTop: "2%" }}
>
Add Jobs
</div>
<Divider
style={{
marginTop: "1%",
marginBottom: "3%",
color: "white",
}}
></Divider>
<div
style={{
marginLeft: "4%",
marginTop: "2%",
}}
>
<Grid container>
<Grid item xs={6}>
<LabelStyling>Job Name</LabelStyling>
<TextField
id="jobName"
name="jobName"
variant="outlined"
placeholder="Enter Job Name"
value={formik.values.jobName}
onChange={formik.handleChange}
size="small"
style={{
width: FORM_PART_VARS.INPUT_BOX_WIDTH,
}}
/>
</Grid>
<Grid item xs={6}>
<LabelStyling>Stage</LabelStyling>
<DropDown
id="stage"
width={FORM_PART_VARS.INPUT_BOX_WIDTH}
value={formik.values.stage}
onChange={formik.handleChange}
error={formik.touched.stage && Boolean(formik.errors.stage)}
helperText={formik.touched.stage && formik.errors.stage}
mapFile={Stage}
placeholder="Select Stage"
/>
</Grid>
</Grid>
</div>
<div
style={{
marginLeft: "4%",
marginTop: "2%",
}}
>
<Grid container>
<Grid item xs={6}>
<LabelStyling>Measurement</LabelStyling>
<TextField
id="measurement"
name="measurement"
variant="outlined"
placeholder="Enter Measurement"
value={formik.values.measurement}
onChange={formik.handleChange}
size="small"
style={{
width: FORM_PART_VARS.INPUT_BOX_WIDTH,
}}
/>
</Grid>
<Grid item xs={6}>
<LabelStyling>Measurement Unit</LabelStyling>
<DropDown
id="measurement_unit"
width={FORM_PART_VARS.INPUT_BOX_WIDTH}
value={formik.values.measurement_unit}
onChange={formik.handleChange}
error={
formik.touched.measurement_unit &&
Boolean(formik.errors.measurement_unit)
}
helperText={
formik.touched.measurement_unit &&
formik.errors.measurement_unit
}
mapFile={MeasurementUnit}
placeholder="Select Unit"
/>
</Grid>
</Grid>
</div>
<div
style={{
marginLeft: "4%",
marginTop: "2%",
}}
>
<Grid container>
<Grid item xs={6}>
<LabelStyling>Rate</LabelStyling>
<TextField
name="jobRate"
id="jobRate"
variant="outlined"
placeholder="Enter Rate"
value={formik.values.jobRate}
onChange={formik.handleChange}
size="small"
style={{
width: FORM_PART_VARS.INPUT_BOX_WIDTH,
}}
/>
</Grid>
<Grid item xs={6}>
<LabelStyling>Service Rate</LabelStyling>
<TextField
name="serviceRate"
id="serviceRate"
variant="outlined"
placeholder="Enter Service Rate"
value={formik.values.serviceRate}
onChange={formik.handleChange}
size="small"
style={{
width: FORM_PART_VARS.INPUT_BOX_WIDTH,
}}
/>
</Grid>
</Grid>
</div>
<div
style={{
marginLeft: "4%",
marginTop: "4%",
}}
>
<LabelStyling>Select Measurement(s)</LabelStyling>
<FormGroup row>
<FormControlLabel control={<CheckBox checked={nos} onChange={handleNos} name="Nos" id="1"/>} label="Nos" />
<FormControlLabel control={<CheckBox checked={length} onChange={handleLength} name="Length" id="2"/>} label="Length" style={{marginLeft: "15px"}}/>
<FormControlLabel control={<CheckBox checked={breadth} onChange={handleBreadth} name="Breadth" id="3"/>} label="Breadth" style={{marginLeft: "15px"}}/>
<FormControlLabel control={<CheckBox checked={height} onChange={handleHeight} name="Height" id="4"/>} label="Height" style={{marginLeft: "15px"}}/>
</FormGroup>
</div>
<div
style={{
marginLeft: "4%",
marginTop: "4%",
}}
>
<LabelStyling>Select Job Type</LabelStyling>
<FormGroup row>
<FormControlLabel control={<CheckBox name="jobType" value="Residential"/>} label="Residential"/>
<FormControlLabel control={<CheckBox name="jobType" value="Commercial"/>} label="Commercial"/>
<FormControlLabel control={<CheckBox name="jobType" value="Infrastructure"/>} label="Infrastructure"/>
</FormGroup>
</div>
</form>
</>
);

Answer 1

When using Formik , it is not needed to maintain additional state to capture the form field values Formik will take care of that .
In this case , since we need to programmatically change the values of other inputs based on a change in one input we can make use of the setFieldValue prop provided by Formik .
Working Sandbox

Answer 2

To combine multiple states and multiple handlers, try something like this:
const [state, setState] = useState({
nos: false,
length: false,
breadth: false,
height: false
});
const handleCheckBox = useCallback((checkbox) => () => setState(state => {
switch (checkbox) {
case 'nos': return {
...state,
nos: !state.nos,
};
case 'length': return {
...state,
nos: !state.nos,
length: !state.length,
};
case 'breadth': return {
...state,
nos: !state.nos,
length: !state.length,
breadth: !state.breadth,
};
case 'height': return {
...state,
nos: !state.nos,
length: !state.length,
breadth: !state.breadth,
height: !state.height,
};
default: {
console.warn('unknown checkbox', checkbox);
return state;
}
}
}), []);
<FormGroup row>
<FormControlLabel control={<CheckBox checked={state.nos} onChange={handleCheckBox('nos')} name={'Nos'} id={'1'}/>} label={'Nos'}/>
<FormControlLabel control={<CheckBox checked={state.length} onChange={handleCheckBox('length')} name={'Length'} id={'2'}/>} label={'Length'} style={{marginLeft: '15px'}}/>
<FormControlLabel control={<CheckBox checked={state.breadth} onChange={handleCheckBox('breadth')} name={'Breadth'} id={'3'}/>} label={'Breadth'} style={{marginLeft: '15px'}}/>
<FormControlLabel control={<CheckBox checked={state.height} onChange={handleCheckBox('height')} name={'Height'} id={'4'}/>} label={'Height'} style={{marginLeft: '15px'}}/>
</FormGroup>