React-dates: onDatesChange returns null

[M1ck0]

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';

[mmarkelov]

@M1ck0 According to docs
The user will only be able to select a date if focusedInput is provided.
So your focus should be startDate

[M1ck0]

If you think this

focusedInput={startDate}

It is not working.. Already tried that

[mmarkelov]

@M1ck0 it should be: focusedInput='startDate'
You code will be:

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

  const [focus, setFocus] = React.useState("startDate");

  const { startDate, endDate } = dateRange;

  return (
    <div className="App">
      <DayPickerRangeController
        startDate={startDate}
        endDate={endDate}
        onDatesChange={date => setDateRange(date)}
        focusedInput={focus}
        onFocusChange={focus => setFocus(focus)}
      />
    </div>
  );

[M1ck0]

It works (sort of). It does what it should but now I can't change date.
Any ideas?

[M1ck0]

If you want to change date set focus to 'startDate'

setFocus('startDate')

[Jeniffen]

I was running into a similar issue. The previous solution worked for me with a _minor_ adjustment, which was pointed out here: https://github.com/airbnb/react-dates/issues/736#issuecomment-333237624

According to that, I adjusted the callback for the onFocusChange prop to the following:

...
onFocusChange={(focus) => setFocus(focus || "startDate")}
...

Based on the previous comments, my solution looks like the following:

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

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

  return (
    <div className="App">
      <DayPickerRangeController
        startDate={startDate}
        endDate={endDate}
        onDatesChange={(date) => setDateRange(date)}
        focusedInput={focus}
        onFocusChange={(focus) => setFocus(focus || "startDate")}
      />
    </div>
  );