customInput typescript issue (React.ReactNode)

[donghakang]

Hello, I am currently using react-datepicker for my project, using next.js and typescript.

I followed an example online

const [startDate, setStartDate] = useState(new Date());
  const ExampleCustomInput = forwardRef(({ value, onClick }, ref) => (
    <button className="example-custom-input" onClick={onClick} ref={ref}>
      {value}
    </button>
  ));
  ExampleCustomInput.displayName = 'ExampleCustomInput';
  return (
    <DatePicker
      selected={startDate}
      onChange={(date: Date) => setStartDate(date)}
      customInput={<ExampleCustomInput />}
    />
  );

and it shows this error.

No overload matches this call.
  Overload 1 of 2, '(props: ReactDatePickerProps<never, undefined> | Readonly<ReactDatePickerProps<never, undefined>>): ReactDatePicker<never, undefined>', gave the following error.
    Type 'Element' is not assignable to type 'ReactNode'.
      Property 'children' is missing in type 'Element' but required in type 'ReactPortal'.
  Overload 2 of 2, '(props: ReactDatePickerProps<never, undefined>, context: any): ReactDatePicker<never, undefined>', gave the following error.
    Type 'Element' is not assignable to type 'ReactNode'.ts(2769)
index.d.ts(175, 9): 'children' is declared here.
index.d.ts(59, 5): The expected type comes from property 'customInput' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<ReactDatePicker<never, undefined>> & { css?: Interpolation<Theme>; } & Readonly<...>'
index.d.ts(59, 5): The expected type comes from property 'customInput' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<ReactDatePicker<never, undefined>> & { css?: Interpolation<Theme>; } & Readonly<...>'
(property) customInput?: React.ReactNode

Anyone SO good at typescript that can help me ?

[Long6695]

upgrade "@types/react": "18.2.28". It solved my problem

[JosephKorel]

How should one type forwardRef in this case? Still has the same error

[chetta19]

I'm having the same issue. Upgrading to [email protected] @types/[email protected] did not solve the issue

[cholazzzb]

Simply use as from typescript. This is not a good practice, but can be used for the workaround

type CustomInputProps = {
  onClick(): void;
  // Add any other to fulfill your need
};
const CustomInput = forwardRef((props, ref) => {
  const shadowProps = props as CustomInputProps;
  const shadowRef = ref as ForwardedRef<HTMLButtonElement>; // Or `HtmlInputElement`, or anything you need 
  return (
    <button
      ref={shadowRef}
      onClick={shadowProps.onClick}
      className='bg-purple-700'
    >
      your value
    </button>
  );
});

and use it

function YourComponent() {
  return <ReactDatePicker
     {...yourOtherProps}
     customInput={<CustomInput />}
  />
}