[v7] Material UI Multiple Checkboxes with useController

[mkoehlerJjk]

I am trying to figure out a way to create a reusable form component, that would utilize useController and the standard Material UI Checkbox, that I can pass it an array of objects, and have it save my results in array.

this is what I expect it to look like

This is my Sample data,
const groupOptions = [
{label: 'Trinity', value: '1'},
{label: 'Morpheus', value: '2'},
{label: 'Neo', value: '3'},
{label: 'Tank', value: '4'},
{label: 'Dozer', value: '5'}
]

and what i would love to happen is when I click on a few checkboxes it saves the values in an array.
checkboxGroup= ['1','2','3']

so i was thinking something along these lines
https://codesandbox.io/s/festive-grothendieck-thfhh?file=/src/App.js

Update... i fixed my link, and I came up with a solution, but if you have a better one I am all ears

[bluebill1049]

Your solution looks good to me, you want to share the link in a comment and i will vote as an answer?

https://codesandbox.io/s/festive-grothendieck-thfhh?file=/src/App.js

(i will update yours as answer once your comment i up there)

[mkoehlerJjk]

Here is a codesandbox of a way I got this to work

https://codesandbox.io/s/festive-grothendieck-thfhh?file=/src/App.js

[bluebill1049]

Thank you @mkoehlerJjk

[alifa20]

Wondering if this link is broken? I was hoping I could check the code!

[bluebill1049]

what's the issue you are having with Ali?

[mkoehlerJjk]

@alifa20 , here is a new codesandbox link for ya. I will try hard to not delete it anymore
https://codesandbox.io/s/react-hook-form-v7-checkboxgroup-example-ooslz?file=/src/App.js

[maquintal]

awesome exactly what I was looking for, better than chatGPT, thanks for sharing :)

[mkoehlerJjk]

well... this is unfortunate. I was cleaning out my CodeSandboxes as I had like 200 random ones and accidentally deleted this one... Here is a snip of my current reusable checkbox group code,

`const CheckboxGroup = ({
	config,
	control,
	label,
	name,
	options,
	row,
	...rest
}) => {
	const {
		field: { ref, value, onChange, ...inputProps },
		formState: { errors },
	} = useController({
		name,
		control,
		defaultValue: [],
	});

	const checkboxIds = useWatch({ control, name: name }) || [];
	const classes = useStyles();

	const handleChange = (value) => {
		const newArray = [ ...checkboxIds ];
		const item = value;

		//Ensure array isnt empty
		if (newArray.length > 0) {
			//Attempt to find an item in array with matching id
			const index = newArray.findIndex(x => x === item);

			// If theres no match add item to the array
			if (index === -1) {
				newArray.push(item);
			} else {
				//If there is a match and the value is empty, remove the item from the array
				newArray.splice(index, 1);
			}
		} else {
			//If the array is empty, add the item to the array
			newArray.push(item);
		}

		//Overwrite existing array with newArray}
		onChange(newArray);
	}

	return (
		<div>
			<FormControl className={rest?.className}>
				{label && <FormLabel label={label} />}
				<FormGroup row={row}>
					{options.map((option) => (
						<FormControlLabel
							classes={row && { root: classes.label }}
							control={
								<Checkbox
									checked={value
										?.some(checked => checked === option[config.value])}
									{...inputProps}
									inputRef={ref}
									onChange={() => handleChange(option[config.value])}
									disabled={rest?.disabled}
								/>}
							label={
								<p className="body2">
									{option[config.label]}
								</p>
							}
							key={option[config.value]}
						/>
					))}
				</FormGroup>
			</FormControl>
			<FormHelperText
				error
				variant="outlined"
			>
				{errors?.[name]?.message || ' '}
			</FormHelperText>
		</div>
	);
}`