CODEWITHSUNDEEP
javascriptreactjstypescriptreact-calendarreact-daterange-picker
Nyxynyx
Nyxynyx

Reputation: 63599

Typescript Error using react-daterange-picker "No overload matches this call."

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}
        />
    )
}

Upvotes: 3

Views: 2803

Answers (3)

David Alvarez
David Alvarez

Reputation: 1286

I added the type definition in @types. You can install it by doing npm install --save @types/wojtekmaj__react-daterange-picke

Upvotes: 1

Nazmul Alam
Nazmul Alam

Reputation: 91

change your import line

import DateRangePicker from 'react-daterange-picker';

to

import DateRangePicker from '@wojtekmaj/react-daterange-picker';

If package not installed then:

npm install @wojtekmaj/react-daterange-picker

Hope this will help you. Thank you.

Upvotes: 1

Alex Wayne
Alex Wayne

Reputation: 186984

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.

Upvotes: 2

Related Questions