Version 1.7.3: Argument of type 'DateValueType' is not assignable to parameter of type 'SetStateAction<{ startDate: null; endDate: null; }>'

[tchangqikr]

I'm working with React 18 and wanted to install this version of the Datepicker. I ran npm install react-tailwindcss-datepicker@1.7.3 and updated the dependencies to match. Then I added the following code to my Tailwind config file:

content: [
        "./src/**/*.{js,jsx,ts,tsx}",
        "./node_modules/react-tailwindcss-datepicker/dist/index.esm.js"
    ]

Since I'm working with ES modules, the format ended up being more like

export default {
  content: [
        './src/**/*.{js,ts,jsx,tsx}', 
        "./node_modules/react-tailwindcss-datepicker/dist/index.esm.js"
  ],

When I try to implement the Datepicker with the following snippet:

<Datepicker value={value} onChange={newValue => setValue(newValue)} />

I get the following error:

Argument of type 'DateValueType' is not assignable to parameter of type 'SetStateAction<{ startDate: null; endDate: null; }>'.
  Type 'null' is not assignable to type 'SetStateAction<{ startDate: null; endDate: null; }>'.ts(2345)

Not really sure what to do from here, since I followed the setup as best I could. Do you have any ideas?

[neekfenwick]

You don't show how you set up your value. I got a similar error when using the kind of syntax shown in your error message.

Try:

const [ dateRange, setDateRange ] = useState<DateValueType>({
  startDate: null,
  endDate: null
});

The point is that the useState hook is given the type DateValueType, and not an object description like {startDate: Date | null, endDate: Date | null}. This makes the type of dateRange be DateValueType, and then using it in value={value} makes the types all match.

Import the DateValueType from the package along with Datepicker:

import Datepicker, { DateValueType } from "react-tailwindcss-datepicker";