Argument of type 'Date | null' is not assignable to parameter of type 'SetStateAction'

Question

I am following the Ionic tutorial for react. I created the tutorial page and I am trying to add a datepicker element to it. This is my page right now:

import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
import React, { useState } from 'react';
import DatePicker from 'react-datepicker'
import "react-datepicker/dist/react-datepicker.css";

const Home: React.FC = () => {
  const [startDate, setStartDate] = useState(new Date());
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Ionic Blank</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent className="ion-padding">
        The world is your oyster 14.
        <p>
          If you get lost, the{' '}
          <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/">
            docs
          </a>{' '}
          will be your guide.
        </p>
        <DatePicker selected={startDate} onChange={date => setStartDate(date)} />
      </IonContent>
    </IonPage>
  );
};

export default Home;

The datepicker that I am using is from here and I used the first example in my page:

() => {
  const [startDate, setStartDate] = useState(new Date());
  return (
    <DatePicker selected={startDate} onChange={date => setStartDate(date)} />
  );
};

However, I am getting the following error:

[react-scripts] Argument of type 'Date | null' is not assignable to parameter of type 'SetStateAction<Date>'.
[react-scripts]   Type 'null' is not assignable to type 'SetStateAction<Date>'.  TS2345
[react-scripts]     22 |           will be your guide.
[react-scripts]     23 |         </p>
[react-scripts]   > 24 |         <DatePicker selected={startDate} onChange={date => setStartDate(date)} />
[react-scripts]        |                                                                         ^
[react-scripts]     25 |       </IonContent>
[react-scripts]     26 |     </IonPage>
[react-scripts]     27 |   );

What is the problem?

Answer 1

The onChange callback from react-datepicker looks like this:

onChange(date: Date | null, event: React.SyntheticEvent<any> | undefined): void;

So date potentially can be null. You have two options here:

---

1.) accept nullable date state in useState Hook:

const [startDate, setStartDate] = useState<Date | null>(new Date());

2.) only invoke setStartDate, when date is not null:

<DatePicker selected={startDate} onChange={date => date && setStartDate(date)} />

Answer 2

Update for same issue in 2021

<DatePicker selected={startDate} onChange={(date: Date | null) => setStartDate(date)} />

Does the job

Answer 3

I know I am late to join the party, I just got the DatePicker working. Following is the working code:

const [startDate, setStartDate] = useState<Date>(new Date());
<DatePicker
   selected={startDate}
   onChange={(date: Date) => setStartDate(date!)}
/>

Answer 4

This works for me:

() => {
  const [startDate, setStartDate] = useState<Date|null>(new Date());
  return (
    <DatePicker selected={startDate} onChange={(date: Date | null) => setStartDate(date)} />
  );
};

Answer 5

For someone who get the error:

Type 'Date | [Date | null, Date | null] | null' is not assignable to type 'Date | null | undefined

That's because you are using date range so onChange argument will get an array type [start, end].