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

[asep]

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>

[Ponmani Murugaiyan]

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. 

https://ej2.syncfusion.com/react/documentation/common/how-to/resolve-react-template-issues/ 

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

  

Sample: https://codesandbox.io/s/focused-galois-greds  

Regards, 

Ponmani M 

[asep]

thank you so much this work for me

[Ponmani Murugaiyan]

Hi asep, 

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

Regards, 

Ponmani M