1.how to access and update datasource based on conditions and 2.scheduler is not updating when we update datasource data via UseState

[bonisa]

I am using scheduler and i want to change scheduler via useState please help me i am using it in react functional component

[Vijay Ravi]

Hi Bonisa,

Sample:
https://stackblitz.com/edit/ej2-react-schedule-update-data-using-state?file=index.js

You can update the Schedule data source using UseState, as shown in the below code snippet.

[index.js] 

function LocalData() {

  const [data, setData] = React.useState(initialData);

 

  function onClick() {

    setData(data.concat(newData))

  }

 

  return (<><div className="container"><ButtonComponent onClick={onClick.bind(this)}>click to add</ButtonComponent></div><div>

    <ScheduleComponent width='100%' height='650px' selectedDate={new Date(2022, 2, 25)} ref={t => scheduleObj = t} eventSettings={{

      dataSource: data

    }}>

      <Inject services={[Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]} />

    </ScheduleComponent></div></>

  );

}

export default LocalData;

Output screenshot before click add button:

Output screenshot with click add button:

Regards,

Vijay Ravi