I am fairly new to React and I'm trying to use [react-day-picker][1] for a simple date picking option. problem is I copied the code as they have in the [example][2], but the onDayPick param has a squiggly line and gives me this error
No overload matches this call.
Overload 1 of 2, '(props: DayPickerProps | Readonly<DayPickerProps>): DayPicker', gave the following error.
Type '(day: any, { selected, disabled }: { selected: any; disabled: any; }) => void' is not assignable to type '(day: Date, modifiers: DayModifiers, e: MouseEvent<HTMLDivElement, MouseEvent>) => void'.
Types of parameters '__1' and 'modifiers' are incompatible.
Type 'DayModifiers' is missing the following properties from type '{ selected: any; disabled: any; }': selected, disabled
Overload 2 of 2, '(props: DayPickerProps, context: any): DayPicker', gave the following error.
Type '(day: any, { selected, disabled }: { selected: any; disabled: any; }) => void' is not assignable to type '(day: Date, modifiers: DayModifiers, e: MouseEvent<HTMLDivElement, MouseEvent>) => void'.
here is my component, in case I did something wrong while copying it
import React from 'react';
import DayPicker from 'react-day-picker';
import 'react-day-picker/lib/style.css';
export default class DatePicker extends React.Component<{}, {selectedDay: any}>{
constructor(props) {
super(props);
this.state = {
selectedDay: undefined,
}
this.handleDayClick = this.handleDayClick.bind(this);
}
handleDayClick(day, { selected, disabled }) {
if (disabled) {
// Day is disabled, do nothing
return;
}
if (selected) {
// Unselect the day if already selected
this.setState({ selectedDay: undefined });
return;
}
this.setState({ selectedDay: day });
}
render() {
return(
<div>
<DayPicker
onDayClick={this.handleDayClick}
selectedDays={this.state.selectedDay}
/>
{this.state.selectedDay ? (
<p>You clicked {this.state.selectedDay.toLocaleDateString()}</p>
) : (
<p>Please select a day.</p>
)}
</div>
)
}
}
[1]: https://react-day-picker.js.org/
[2]: https://react-day-picker.js.org/docs/basic-concepts
