react hook form material ui checkbox array

Question

i can't get values of checkbox array

const schema = yup.object().shape({
  modules: yup.array(),
});

component

{role === "user" &&
                divisions.map((division, i) => (
                  <Box key={division.name}>
                    <Typography variant='h6'>{division.name}</Typography>
                    {division.modules.map((m, j) => (
                      <Controller
                        key={m.name}
                        name={`modules[${i}][${j}]`}
                        control={control}
                        defaultValue={[division.name, m.name, false]}
                        render={({ field }) => (
                          <FormControlLabel
                            {...field}
                            label={m.name}
                            control={
                              <Checkbox
                                onChange={(e) => (e.target.value = "chen")}
                                color='primary'
                              />
                            }
                          />
                        )}
                      />
                    ))}
                  </Box>
                ))}

when i submit the form without checking anything i got a result like this

{//userinfo,  modules: [
//array per division and a nested array for modules access
 [ ["Admin-tools", "admin",false ],  ["Admin-tools", "Backup",false ] ] 
...other divisions and modules
 ]   }

this is the result i expect when i check fields and submit the form

 {//userinfo,  modules: [
    //array per division and a nested array for modules access
     [ ["Admin-tools", "admin",true],  ["Admin-tools", "Backup",true
 ] ] 
    ...other divisions and modules
     ]   }

but i got

{//userinfo,  modules: [
//array per division and a nested array for modules access
 [ [true],  [true] ] 
...other divisions and modules
 ]   }

Karim Mokhtar Karim Mokhtar · Accepted Answer · 2021-06-28T12:47:56

if you want the values of the checkbox in order to go to the form values and get it. you have to give each check box a name property. ex:

<FormControlLabel
   {...field}
   label={m.name}
   control={
    <Checkbox
     onChange={(e) => (e.target.value = "chen")}
     color='primary'
     name='name-one'
    />
   }
/>

react hook form material ui checkbox array

1 Answers