Airbnb react-dates returns null

Question

This is code that I implemented

<DayPickerRangeController
                startDate={startDate}
                startDateId="startDateId"
                endDate={endDate}
                endDateId="endDateId"
                onDatesChange={(date) => console.log(date)}
                focusedInput={focus}
                onFocusChange={(focus) => console.log(focus)}
              />

But onDatesChange returns null

{startDate: null, endDate: null}

here are my hooks

const [dateRange, setDateRange] = useState({
    startDate: null,
    endDate: null,
  });
  const [focus, setFocus] = useState(null);

const { startDate, endDate } = dateRange;

Any ideas why?

These are my imports

import 'react-dates/initialize';
import { DayPickerRangeController } from 'react-dates';

here is full code

import 'react-dates/initialize';
import { DayPickerRangeController } from 'react-dates';

const DatePicker = ({ name, items, handler }) => {

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

  const [focus, setFocus] = useState(null);
  const { startDate, endDate } = dateRange;

  return (
    <DayPickerRangeController
       startDate={startDate}
       startDateId="startDateId"
       endDate={endDate}
       endDateId="endDateId"
       onDatesChange={(date) => console.log(date)}
       focusedInput={focus}
       onFocusChange={(focus) => console.log(focus)}
    />
  )
}

Answer 1

I've tested it in codesandbox and it seems that onFocusChange is not getting triggered once the focus variable ends up being null.

Use constants, as described in react-dates docs, not null.

const [focus, setFocus] = useState(START_DATE);
...
focusedInput={this.state.focusedInput} // PropTypes.oneOf([START_DATE, END_DATE]) or null,

START_DATE, END_DATE constants can be easily imported:

import { START_DATE, END_DATE } from 'react-dates/constants';

Ps: when you are done with selecting the range, focus variable will be given null value again. In order to pick the values again, I guess it would be the best to reset all the values (focus, startDate and endDate)

Update:

I've checked their implementation here. It's pretty straight forward:

onFocusChange={(f) => {
        setFocus(!f ? START_DATE : f);
       }}