Using react-dates with Typescript

I am trying to use react-dates with Typescript, but cannot figure out how to define the types.

The following TS/React code is giving the error

Argument of type ‘"startDate" | "endDate" | null’ is not assignable to parameter of type ‘SetStateAction’.
Type ‘"startDate"’ is not assignable to type ‘SetStateAction’.

My code is based on this, is there a simplier way to write this code? Thank you!

import React, { useState } from 'react';

import moment from 'moment';
import "react-dates/initialize";
import "react-dates/lib/css/_datepicker.css";
import { DateRangePicker } from 'react-dates';

interface IHandleDatesChange {
    startDate: moment.Moment | null,
    endDate: moment.Moment | null,

export function Foo(): JSX.Element {
    const [ startDate, setStartDate ] = useState<moment.Moment | null>(moment('1990-01-01'));
    const [ endDate, setEndDate ] = useState<moment.Moment | null>(moment(moment().endOf('year')));
    const [ focusedInput, setFocusedInput ] = useState(null);

    const handleDatesChange = ({ startDate, endDate}: IHandleDatesChange) => {

    return (
            onFocusChange={(focusedInput) => setFocusedInput(focusedInput)}   // <== ERROR OCCURS


  version "21.8.0"
  resolved ""
  integrity sha512-PPriGqi30CtzZmoHiGdhlA++YPYPYGCZrhydYmXXQ6RAvAsaONcPtYgXRTLozIOrsQ5mSo40+DiA5eOFHnZ6xw==
    airbnb-prop-types "^2.15.0"
    consolidated-events "^1.1.1 || ^2.0.0"
    enzyme-shallow-equal "^1.0.0"
    is-touch-device "^1.0.1"
    lodash "^4.1.1"
    object.assign "^4.1.0"
    object.values "^1.1.0"
    prop-types "^15.7.2"
    raf "^3.4.1"
    react-moment-proptypes "^1.6.0"
    react-outside-click-handler "^1.2.4"
    react-portal "^4.2.0"
    react-with-direction "^1.3.1"
    react-with-styles "^4.1.0"
    react-with-styles-interface-css "^6.0.0"


  version "21.8.1"
  resolved ""
  integrity sha512-zgBf0SM6dcDPR29x3bCzSypK0c2+EKDkR4NNyBCwH2GyL/AgIvJ0bQ6n2z1s468SXS2QbzCMJtF831vG7iGkjg==
    "@types/react" "*"
    "@types/react-outside-click-handler" "*"
    moment "^2.26.0"


moment@>=1.6.0, moment@^2.26.0, moment@^2.29.1:
  version "2.29.1"
  resolved ""
  integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==

2 thoughts on “Using react-dates with Typescript”

  1. Edit:

    You haven’t passed a type to your focusedInput state. If you check the @types/react-dates definitions, the onFocusChange prop expects the callback argument to be a specific type: FocusedInputShape which is a string union 'startDate' | 'endDate'.

    To fix, update your state init:

    const [ focusedInput, setFocusedInput ] = useState<FocusedInputShape | null>(null);

    Original answer:

    I seem to recall hitting this issue (or very similar) before and it turned out to be a moment version mismatch between the dependency installed in my project and the dependency installed by react-dates.

    Check which versions are installed and if they do not match, up-/down-grade your project version if you can to see if it makes a difference.


Leave a Comment