How to detect once a new value has been set in react-date-range =

Question

I am using react-date-range (https://www.npmjs.com/package/react-date-range), I want to know if it is possible to set showDate to false once a new value has been set for date.endDate?

    const [showDate,setShowDate] = useState(false)

    const [date, setDate] = useState([
     {
      startDate: new Date(),
      endDate: new Date(),
      key: 'selection',
     }
    ])

  <DateRange
    editableDateInputs={true}
    onChange={(item) => setDate([item.selection])}
    moveRangeOnFirstSelection={true}
    ranges={date}
    showDateDisplay={false}
  />

Answer 1

It is possible if u use useEffect to set showDate to false whenever the date.endDate has been changed. You can add useEffect like this:

useEffect(() => {
    if (date[0].endDate !== showDate) {
        setShowDate(false);
    }
}, [date]);

and change your showDateDisplay from {false} to {showDate}:

<DateRange
    editableDateInputs={true}
    onChange={(item) => setDate([item.selection])}
    moveRangeOnFirstSelection={true}
    ranges={date}
    showDateDisplay={showDate}
/>

or you can also make a new function that run whenever the DateRange onChange is called

const handleDateChange = (item) => {
    setDate([item.selection]);
    setShowDate(false);
}

and change your onChange to {(item) => handleDateChange(item)}

<DateRange
    editableDateInputs={true}
    onChange={(item) => handleDateChange(item)}
    moveRangeOnFirstSelection={true}
    ranges={date}
    showDateDisplay={showDate}
/>

I usually prefer to not use useEffect actually, choose any method you want. cheers!