[DayRangePicker] onChange function call is not calld directly after selected dates

Hey guys,

so I have the following issue. I included a day range picker to my project. I want to do some stuff with all selected day between the selected day range. The thing is that the array is not filled with the days, unless I selected a day range and then reselecting one day.

1. Selecting a day range => array with selected days is still empty
2. Reseleicting one day => the array is filled with the previous selected day range.

here is my code:

//this function pushes the dates in the date array
function getChartCategories(startDate: Date, endDate: Date): Array<string> {
    const dates: Array<string> = [];
    const currentDate = new Date(startDate);
    let currentMonth: number;
    while (currentDate <= endDate) {
        currentMonth = calculateCurrentMonth(currentDate.getMonth());
        dates.push(formatDateToIso8601(currentDate, currentMonth));
        currentDate.setHours(0);
        currentDate.setDate(currentDate.getDate() + 1);
    }
    return dates;
}

function createStartDate(dayRange: DayRange): Date {
    return new Date(
        dayRange?.from?.year?.toString() +
            '-' +
            dayRange?.from?.month?.toString() +
            '-' +
            dayRange?.from?.day?.toString(),
    );
}

function createEndDate(dayRange: DayRange): Date {
    return new Date(
        dayRange?.to?.year?.toString() + '-' + dayRange?.to?.month?.toString() + '-' + dayRange?.to?.day?.toString(),
    );
}


const selectedDates = getChartCategories(createStartDate(selectedDayRange), createEndDate(selectedDayRange));
foo(){
console.Log('123') // is executed after each selection
//do some stuff with the selected days (all days are in an string array)
}
onChange = {v =>
foo();
setSelectedDayRange(v);}

[hieu-t-code]

I had in mind that it could be async, and couldn’t use the first solution as the const is needed somewhere else in my code!

The other two solutions are exactly what I needed. Thanks a lot for your time!

[Kiarash-Z]

@hieu-t-code There’s a problem with your approach. Currently, you try to access selectedDates in handleDaySelection(handler for onChange), but the thing is setting state in react is async. Therefore immediately after updating the state in handleDaySelection, you can’t access the latest updated value! There are three solutions for this which I presented in my forked CodeSandBox:

function handleDaySelection(days: DayRange) {
  setSelectedDayRange(days);
  // solution 1 ✅: move selectedDates to here and pass days: 
  // const selectedDates = getDays(createStartDate(days.from), createEndDate(days.to));
}
console.log(selectedDates); // solution 2 ✅: log it outside of onChange handler

// solution 3 ✅: useEffect!
// React.useEffect(() => {
//   if (selectedDayRange.from && selectedDayRange.to) {
//     // do stuff
//   }
// }, [selectedDayRange])