0

I have a functional component where I am using the react-day-picker component. On the examples page, they use a class-based component and provide this example on how to handle day selection:

...
handleDayClick(day, { selected }) {
}
...
        <DayPicker
          onDayClick={this.handleDayClick}
        />

In my functional component I did this:

  const handleDayClick = (day, { selected }) => {
    ...
  }
...
                <DayPicker
                  onDayClick={handleDayClick}
                />

But TypeScript is complaining saying (with onDayClick underlined):

No overload matches this call.
  Overload 1 of 2, '(props: DayPickerProps | Readonly<DayPickerProps>): DayPicker', gave the following error.
    Type '(day: any, { selected }: { selected: any; }) => void' is not assignable to type '(day: Date, modifiers: DayModifiers, e: MouseEvent<HTMLDivElement, MouseEvent>) => void'.
      Types of parameters '__1' and 'modifiers' are incompatible.
        Property 'selected' is missing in type 'DayModifiers' but required in type '{ selected: any; }'.
  Overload 2 of 2, '(props: DayPickerProps, context: any): DayPicker', gave the following error.
    Type '(day: any, { selected }: { selected: any; }) => void' is not assignable to type '(day: Date, modifiers: DayModifiers, e: MouseEvent<HTMLDivElement, MouseEvent>) => void'.ts(2769)

Also tried this:

                <DayPicker
                  onDayClick={() => handleDayClick()}
                />

But then I don't know what parameters to provide to the handleDayClick() function, which expects two params, and so TypeScript complains with this: Expected 2 arguments, but got 0.

Any help is greatly appreciated!

pompadour
  • 21
  • 5

1 Answers1

0

Change the function params to this to make TypeScript happy:

const handleDayClick(day: Date, modifiers: DayModifiers)
pompadour
  • 21
  • 5