Converting values before onSubmit

[avdb13]

I have the following component in my React app:

const DateField = ({ name }: { name: string }) => {
  const { control } = useFormContext();
  return (
    <Controller
      name={name}
      control={control}
      render={({ field: { onChange, value } }) => (
        <LocalizationProvider dateAdapter={AdapterDayjs}>
          <DatePicker
            format="YYYY-DD-MM"
            value={value || dayjs()}
            onChange={onChange}
          />
        </LocalizationProvider>
      )}
    />
  );
};

My problem is that my interface saves the date as a string while in my code it's a Dayjs class. Can I convert values before submitting them? Changing the type inside the component results in the DatePicker breaking because it needs the class for certain methods.
Something like this but not in the onSubmit handler since its type is (object: EntryFormValues) => void which will result in react-hooks-form just assuming the field is undefined.

[oxuk85]

I use something very similar to this and rather than storing the value as a Date object and then converting it as part of the submit handler, I store the value as a string.
So my value and my onChange method house the logic for the conversion.
I use the hours from the date object as I am using a time picker, but I am sure you can apply similar logic for dates.

             <Controller
                name={`openingTimes.${index}.service_hours.${hoursIndex}.from`}
                control={control}
                render={({ field, fieldState: { error, invalid } }) => (
                  <TimePicker
                    {...field}
                    ampm={false}
                    label="from"
                    onChange={(e) => field.onChange(transformTimeOutput(e))}
                    value={transformTimeInput(field.value!)}
                  />
                )}
              />

My helper methods are transformTimeOutput and transformTimeInput.

const transformTimeInput = (value: string) => {
  if (!value || !value.match(/^\d{2}:\d{2}$/)) return null;
  return new Date(`2000-01-01T${value}:00`);
};
const transformTimeOutput = (value: Date | null) => {
  if (!value || isNaN(value.getTime())) return "";
  return format(value, "HH:mm");
};

That is my approach to it, maybe someone else can comment and we can have a different perspective.

[avdb13]

Wow ... this is quite convoluted to say the least ... but I guess it works? It would be nice of Controller provided some method like beforeSubmit that allowed you to manipulate the data before forwarding it to the actual onSubmit handler.

[avdb13]

So this ended up working but my problem now is that the DatePicker has a red border when I don't pass a default value. It would make sense if the border turned red after validation failed but this happens before the first submission. When I do provide default values they end up getting submitted as undefined. This is probably a bug.

[oxuk85]

Why can't you pass "" as the default value?
It works in my case

[avdb13]

Seems like the error was caused because I rendered the nested form based on the selection. When the selection is empty null got passed to the component props. Hopefully this can provide useful for someone else in the future.

<Controller
            control={methods.control}
            name="type"
            render={({ field: { onChange, value } }) => (
              <div>
                <Select
                  label="Entry"
                  fullWidth
                  displayEmpty
                  value={value || ""}
                  onChange={onChange}
                >
                  {entryOptions.map((option) => (
                    <MenuItem key={option.label} value={option.value}>
                      {option.label}
                    </MenuItem>
                  ))}
                </Select>
                {value ? <EntryForm entry={value} /> : null}
              </div>
            )}
/>