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?
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} />} />
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>
);
}}
/>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With