react-datepicker select object range when handle select

Question

I'm using react-datepicker to building my application.

Follow my source code here: https://codesandbox.io/s/xr76olj70o

I wanna get an object with startDate and endDate when I choose a specified day like this: {startDate: "24-07-2018", endDate: "31-07-2018"}

My handleSelected function like this:

  handleRangeSelected = () => {
    const { startDate, endDate } = this.state;
    const range = {
      startDate: moment(startDate).format("DD-MM-YYYY"),
      endDate: moment(endDate).format("DD-MM-YYYY"),
    }
    console.log('Range selected!', range);
  }

My problem is when I choose a day. At the first time, state seem isn's update immediately when I pick a day.

Results:

First time: I chose 31/07/2018, it logs result:
Range selected! {startDate: "24-07-2018", endDate: "24-07-2018"}


Second time: I chose 01/08/2018, it logs result:
Range selected! {startDate: "24-07-2018", endDate: "31-07-2018"}

What did I wrong here? Need your help! thanks.

fsl · Answer 1 · 2018-07-24T04:40:34.000

Your state seems to be updating correctly, but bear in mind that setState is async, so when you console.log inside your handleRangeSelected, state is not updated yet.

If you want to log it as soon as it updates, you can pass a callback to your setState inside handleChange:

handleChange = ({ startDate, endDate }) => {
  startDate = startDate || this.state.startDate;
  endDate = endDate || this.state.endDate;
  if (startDate.isAfter(endDate)) {
    endDate = startDate;
  }
  // Pass callback to log selected range
  this.setState({ startDate, endDate }, () => {
    const range = {
      startDate: moment(this.state.startDate).format("DD-MM-YYYY"),
      endDate: moment(this.state.endDate).format("DD-MM-YYYY")
    };
    console.log("Range selected!", range);
  });
};

score 0 · Answer 2 · answered Jul 24 '18 at 04:35

React setState is asynchronous as a result there you'll face such problems, setState takes a callback as its second argument, you can call the handleRangeSelected function in that callback

You can check https://codesandbox.io/s/011x911nyl i have just logged "state updated" in the callback, just change it to call handleRangeSelected

score 0 · Answer 3 · answered Jul 24 '18 at 04:50

You are calling onChange and onSelect in your DatePickers. they both fire at the same time so the one who set the new State is fired and the other use the old state values. I changed your code to call handleRangeSelected in the setState callback in handleChange

this.setState({ startDate, endDate }, this.handleRangeSelected);

react-datepicker select object range when handle select

3 Answers3