Update state without page reload

[alexbran8]

After delete / add operations, I could not manage to update the state without refreshing the page. This is my code: delete = (schedulerData, event) => { if (this.props.role === "L3") { if ( window.confirm( Are you sure you want to delete: ${event.title} assigned to ${event.name} with ${event.replacement} as replacement? ) ) Axios.delete(${baseURL}/schedule/delete/${event.id}, event); schedulerData.removeEvent(event); this.setState({ viewModel: schedulerData, }); } else { return; } }; ``

<Scheduler schedulerData={this.state.viewModel} prevClick={this.prevClick} nextClick={this.nextClick} onSelectDate={this.onSelectDate} onViewChange={this.onViewChange} eventItemClick={this.eventClicked} viewEventClick={this.edit} viewEventText="Edit" viewEvent2Text={this.props.role === "L3" ? "Delete" : null} viewEvent2Click={this.props.role === "L3" ? this.delete : null} updateEventStart={this.updateEventStart} updateEventEnd={this.updateEventEnd} moveEvent={this.props.role === "L3" ? this.moveEvent : null} newEvent={this.newEvent} rightCustomHeader={this.rightCustomHeader} conflictOccurred={this.conflictOccurred} slotClickedFunc={this.slotClickedFunc} />

However for updating event start / end and moving events, things work: updateEventStart = (schedulerData, event, newStart) => { let newEventStart = { id: event.id, nokiaid: event.resourceId, start: newStart, end: event.end, type: event.type, title: event.title, replacement: event.replacement, status: "L3", }; Axios.post(`${baseURL}/schedule/update/${event.resourceId}`, newEventStart); schedulerData.updateEventStart(event, newStart); this.setState({ viewModel: schedulerData, }); }

Do you have any ideea how to fix this?

[alexbran8]

my state is not updating. I guess this is the problem.

[adityakumarsingh900]

I am also facing the same problem. I am using useState to maintain the viewModel.

The problem is that React is not re-rendering the component as it thinks the object doesn't change.

The quick workaround was to maintain a new state counter and update it every time I was updating viewModel

[alexbran8]

Thanks so much for the answer! Would I ask to much for some code of how you tackled this issue please? :)

[adityakumarsingh900]

Thanks so much for the answer! Would I ask to much for some code of how you tackled this issue please? :)

import React, { useState } from 'react'; import Scheduler, { SchedulerData, ViewTypes } from 'react-big-scheduler'; //include react-big-scheduler/lib/css/style.css for styles, link it in html or import it here import 'react-big-scheduler/lib/css/style.css'; import withDragDropContext from './components/withDnDContext';

import { resources, events } from 'pages/calendar/data';

let schedulerData = new SchedulerData('2017-12-18', ViewTypes.Week); schedulerData.localeMoment.locale('en'); schedulerData.setResources(resources); schedulerData.setEvents(events);

const Calendar = () => { const [viewModal, setViewModal] = useState(schedulerData); // eslint-disable-next-line no-unused-vars const [renderCounter, setRenderCounter] = useState(0);

const prevClick = schedulerData => { schedulerData.prev(); schedulerData.setEvents([]); setViewModal(schedulerData); setRenderCounter(o => ++o); };

...

return ( <Box> <Scheduler schedulerData={viewModal} prevClick={prevClick} ... /> </Box> ); };

export default withDragDropContext(Calendar);

[alexbran8]

Thanks a lot! :)

[alexbran8]

Could please let me know how you implemented the render counter in the scheduler component when adding new events? I got the ideea of how this works, but I do not know how to add it to the Scheduler component

[alexbran8]

I am using a modal to create new events, so that is where the counter get incremented. Thanks a lot for all your help! :)