Issue
Trying to use RadioGroup from Material UI wrapped with react-hook-form Controller, always getting the selected value null, here is my code, I wonder what I am missing?
import * as React from "react";
import {
FormControl,
FormControlLabel,
FormHelperText,
Radio,
RadioGroup
} from "@mui/material";
import { useState } from "react";
import { useFormContext, Controller } from "react-hook-form";
interface IOptionTypes {
id: string;
label: string;
value: string;
desc?: string;
}
interface IFormElementTypes {
name: string;
options: IOptionTypes[];
}
export default function RadioFieldElement({
name,
options
}: IFormElementTypes) {
const {
control,
register,
formState: { errors }
} = useFormContext();
return (
<Controller
name={name}
defaultValue=""
control={control}
render={({ field }) => (
<FormControl fullWidth>
<RadioGroup
{...field}
{...register(name)}
row
onChange={(event, value) => field.onChange(value)}
value={field.value}
>
{options.map((option) => (
<FormControlLabel
key={option.id}
value={option.value}
control={<Radio />}
label={option.label}
/>
))}
</RadioGroup>
<FormHelperText>{String(errors[name]?.message ?? "")}</FormHelperText>
</FormControl>
)}
/>
);
}
Here is the live code.
Just simply select any value from list and press submit in console you will see the value is null always.
Thanks for help.
Solution
In your RadioFieldElement.tsx
you don't need to put {...register(name)}
on your RadioGroup
. Simply remove that and everything will work as expected:
<RadioGroup
{...field}
// remove this line ---> {...register(name)}
row
onChange={(event, value) => field.onChange(value)}
value={field.value}
>
Here's a full codesandbox example:
Answered By - Andrew Hulterstrom
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.