Usage implementation with React Hook Form!

[xtealer]

Had an issue using Register API of React Hook Form. Looking at the documentation found out that there's another way of handling components that don't return the original event object on the onChange function using the Controller API.

Example:

/*
* React Function Component Example
* This works with either useForm & useFormContext hooks.
*/
import { FC } from 'react'
import { Controller, useFormContext } from 'react-hook-form'
import DatePicker,{ DatePickerProps } from 'react-date-picker/dist/entry.nostyle'


const FormDateInput: FC<Omit<DatePickerProps, 'onChange'>> = ({
  name,
  ...props
}) => {
  const formMethods = useFormContext()
  const { control } = formMethods ?? {}

  return (
    <Controller
      render={({ field }) => <DatePicker {...props} {...field} />}
      name={name ?? 'date'}
      control={control}
    />
  )
}

export default FormDateInput

More details on Controller API Docs

Topic on StackOverflow:
https://stackoverflow.com/a/72749426/10369460