I'm creating a form which has a date field. I'm using MUI and react-hook-form for validation. I've tried to render the field in two different ways, but when submitting my form I'm not getting the expected value:
Render 1
Using a Controller component:
const [originalReleaseDate, setOriginalReleaseDate] = useState(null);
<Controller
name={"original_release_date"}
defaultValue={originalReleaseDate}
control={control}
render={({field}) =>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DatePicker
label="Original Release Date"
value={originalReleaseDate}
onChange={(newValue) => {
setOriginalReleaseDate(newValue);
}}
renderInput={(params) =>
<TextField
{...params}
/>}
/>
</LocalizationProvider>
}
/>
when I render the field this way, I'm getting null for original_release_date after submitting the form.
Render 2
Registering the field directly using {...register("reissue_release_date")} instead of react-hook-form Controlled component.
const [reissueReleaseDate, setReissueReleaseDate] = useState(null);
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DatePicker
label="Reissue Release Date"
value={reissueReleaseDate}
onChange={(newValue) => {
setReissueReleaseDate(newValue);
}}
renderInput={(params) =>
<TextField
{...params}
{...register("reissue_release_date")}
/>}
/>
</LocalizationProvider>
this way is working half way. If I manually type the date then I'm getting its value on submit, BUT if I use the date picker and then submitting the form I get "".
Any idea what's going on?
I couldn't replicate your setup, but my guess is that in the first render the reference to the 'setOriginalReleaseDate' is lost when being passed through the Controller's render arrow function.
...
onChange={(newValue) => {
setOriginalReleaseDate(newValue);
}}
...
so, try putting the logic in a defined function like:
const handleOriginalReleaseDateChange = (newValue) => {
setOriginalReleaseDate(newValue);
};
and change the onChange to call the function.
...
onChange={handleOriginalReleaseDateChange}
...