react-hook-form material-ui dropdown Field is missing `name` attribute:

Question

const roles = [
  { value: "STAFF", label: "Staff" },
  { value: "ADMIN", label: "Administrator" },
  { value: "MANAG", label: "Manager" },
  { value: "SUPER", label: "Supervisor" },
  { value: "OTHER", label: "Other" }
]

<Controller as={<TextField />} className={classes.textField} select label="Select Role" 
name="role" variant="outlined" required control={control} fullWidth inputRef={register({ 
required: true })}>
  {roles.map(role => (
    <MenuItem key={role.value} value={role.value}>
      {role.label}
    </MenuItem>
  ))}
  name="role"
</Controller>

I get the value of the dropdown {node: input, value: "MANAG", focus: ƒ} ERROR: Field is missing name attribute: MISSING THE NAME ATTRIBUTE OF "role" How do I assign the name of role attribute?

Bill · Accepted Answer · 2020-08-11 06:11:34Z

4

Take a look at the doc: https://react-hook-form.com/api#Controller

Controller takes care of the registration process, so you don't need to register at input level again.

<Controller
  control={control} 
  name="test" 
  render={({ onChange, onBlur, value }) => (
    <Checkbox
      onBlur={onBlur}
      onChange={e => onChange(e.target.checked)}
      checked={value}
    />
  )}
/>
<Controller render={props => <Input {...props} />} />

answered Aug 11, 2020 at 6:11

Bill

19.5k21 gold badges89 silver badges135 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sir.Nathan Stassen · Accepted Answer · 2021-02-17 22:06:42Z

2

You can try setting inputRef={ref}.

Controller's render provides a ref attribute.

<Controller
  name={'gender'}
  control={control}
  render={({ onChange, value, ref }) => {
    return (
      <Select
        inputRef={ref}
        label="Gender"
        defaultValue=""
        value={value}
        onChange={(event) => onChange(event.target.value)}
      >
        <MenuItem value="" />
        <MenuItem value="male">Male</MenuItem>
        <MenuItem value="female">Female</MenuItem>
        <MenuItem value="other">Other</MenuItem>
      </Select>
    );
  }}
/>

answered Feb 17, 2021 at 22:06

Sir.Nathan Stassen

1,8815 gold badges21 silver badges25 bronze badges

Collectives™ on Stack Overflow

react-hook-form material-ui dropdown Field is missing `name` attribute:

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related