react-calendar onChange TS2769: No overload matches this call Error

Question

I used the response calendar library.

The default code suddenly gives an onChange prop error. What should I do? (It worked before.)

My code

`import React, {useState} from 'react'; import Calendar from "react-calendar";

function App() {

const [value, onChange] = useState(new Date());

return (
    <div>
        <Calendar
            onChange={onChange}
            value={value}
        />
    </div>
);

}

export default App;`

Error message

TS2769: No overload matches this call. Overload 1 of 2, '(props: CalendarProps | Readonly): Calendar', gave the following error. Type 'Dispatch<SetStateAction>' is not assignable to type '(value: Value, event: MouseEvent<HTMLButtonElement, MouseEvent>) => void'. Types of parameters 'value' and 'value' are incompatible. Type 'Value' is not assignable to type 'SetStateAction'. Type 'null' is not assignable to type 'SetStateAction'. Overload 2 of 2, '(props: CalendarProps, context: any): Calendar', gave the following error. Type 'Dispatch<SetStateAction>' is not assignable to type '(value: Value, event: MouseEvent<HTMLButtonElement, MouseEvent>) => void'.

I checked npm version, config files and re-install. But it still don't working.

do you mean https://codesandbox.io/p/sandbox/competent-sanderson-r0t9vz?welcome=true ?? — Ayeon Jeong, Apr 10 '23 at 05:33

score 3 · Answer 1 · answered Apr 10 '23 at 21:06

You are not providing the correct typing for value which is typed like :

type ValuePiece = Date | null;

export type Value = ValuePiece | [ValuePiece, ValuePiece];

so in order to fix this change your state type to :

type  ValuePiece = Date|null;
function App() {
  const [value, onChange] = useState<ValuePiece|[ValuePiece,ValuePiece]>(new Date());

  return (
    <div className="App">
      <Calendar value={value} onChange={onChange} selectRange={false}/>
    </div>
  );
}

export default App;

If you don't wanna work with types rename your file from App.tsx to App.js

react-calendar onChange TS2769: No overload matches this call Error

1 Answers1