When I try to use react-daterange-picker
in my React Typescript app, I get the error
No overload matches this call.
Overload 1 of 2, '(props: RangeProps<DateRangePicker> | SingleProps<DateRangePicker> | Readonly<RangeProps<DateRangePicker>> | Readonly<...>): DateRangePicker', gave the following error.
Type 'Date[]' is not assignable to type 'Moment | (MomentRange & typeof import("/Users/nyxynyx/test/node_modules/moment/ts3.1-typings/moment.d.ts")) | DateRange | undefined'.
Type 'Date[]' is missing the following properties from type 'Moment': format, startOf, endOf, add, and 80 more.
Overload 2 of 2, '(props: Props<DateRangePicker>, context: any): DateRangePicker', gave the following error.
Type 'Date[]' is not assignable to type 'Moment | (MomentRange & typeof import("/Users/nyxynyx/test/node_modules/moment/ts3.1-typings/moment.d.ts")) | DateRange | undefined'.
Type 'Date[]' is not assignable to type 'Moment'. TS2769
20 | <DateRangePicker
21 | onChange={onChange}
> 22 | value={value}
| ^
23 | />
24 | )
25 | }
My code is based on the official example in the package repo.
Why is there a Typescript error here, and how can we fix it?
React Typescript code:
import React, { useState } from 'react';
import DateRangePicker from 'react-daterange-picker';
export function Foo(): JSX.Element {
const [ value, onChange ] = useState([new Date(), new Date()]);
return (
<DateRangePicker
onChange={onChange}
value={value}
/>
)
}
Well the one line you changed from the example was the import.
import DateRangePicker from 'react-daterange-picker';
This line does not import the module you linked to in your question. That imports react-daterange-picker
, but you linked to @wojtekmaj/react-daterange-picker
. Those are two completely different modules.
Instead install @wojtekmaj/react-daterange-picker
and it's types package @types/wojtekmaj__react-datetimerange-picker
. Then it should work like you expect.