We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

error "unstable_flushDiscreteUpdates: Cannot flush updates when React is already rendering" if i use with react bootstrap

If i use the daterangepicker with bootstrap an error occurs like in the picture

the error appears when I use the "change" function in DateRangePickerComponent


this my code

import { DateRangePickerComponent, PresetDirective, PresetsDirective, RangeEventArgs } from "@syncfusion/ej2-react-calendars";

interface SelectDateProps {

}

const SelectDate: React.FC<SelectDateProps> = () => {
    const asdasdasd = (args: RangeEventArgs) => {

    }
    const today: Date = new Date(new Date().toDateString());
    const weekStart: Date = new Date(new Date(new Date().setDate(new Date().getDate() - (new Date().getDay() + 7) % 7)).toDateString());
    const weekEnd: Date = new Date(new Date(new Date().setDate(new Date(new Date().setDate((new Date().getDate()
        - (new Date().getDay() + 7) % 7))).getDate() + 6)).toDateString());
    const monthStart: Date = new Date(new Date(new Date().setDate(1)).toDateString());
    const monthEnd: Date = new Date(new Date(new Date(new Date().setMonth(new Date().getMonth() + 1)).setDate(0)).toDateString());
    const lastStart: Date = new Date(new Date(new Date(new Date().setMonth(new Date().getMonth() - 1)).setDate(1)).toDateString());
    const lastEnd: Date = new Date(new Date(new Date().setDate(0)).toDateString());
    const yearStart: Date = new Date(new Date(new Date().getFullYear() - 1, 0, 1).toDateString());
    const yearEnd: Date = new Date(new Date(new Date().getFullYear() - 1, 11, 31).toDateString());

    const start: Date = new Date("10/7/2017");
    const end: Date = new Date("11/15/2017");

    return (
        <DateRangePickerComponent placeholder='Select a range' startDate={start} endDate={end} change={asdasdasd}>
            <PresetsDirective >
                <PresetDirective label="This Week" start={weekStart} end={weekEnd}></PresetDirective>
                <PresetDirective label="This Month" start={monthStart} end={monthEnd}></PresetDirective>
                <PresetDirective label="Last Month" start={lastStart} end={lastEnd}></PresetDirective>
                <PresetDirective label="Last Year" start={yearStart} end={yearEnd}></PresetDirective>
            </PresetsDirective>
        </DateRangePickerComponent>
    );
}

export default SelectDate;


<Container>
            <Row>
              <Col><SelectDate/></Col>
            </Row>
            <Row><Chart3 /></Row>
          </Container>

3 Replies 1 reply marked as answer

PM Ponmani Murugaiyan Syncfusion Team February 9, 2022 08:09 AM UTC

Hi asep, 

We suggest you to set the delayUpdate property as true to resolve the reported issue. For more information, please refer the below documentation. 


<DateRangePicker delayUpdate={true} width={"50%"} startDate={dateRangeStart} endDate={dateRangeEnd} change={setDateRange}/> 
  

Regards, 
Ponmani M 


Marked as answer

AS asep replied to Ponmani Murugaiyan February 10, 2022 01:37 AM UTC

thank you so much this work for me



PM Ponmani Murugaiyan Syncfusion Team February 10, 2022 04:32 AM UTC

Hi asep, 

Welcome, we are glad to hear that the issue has been resolved. 

Regards, 
Ponmani M 


Loader.
Up arrow icon