BigCalendar is not re-rendering on resource list update

[swarnimsuman]

Do you want to request a feature or report a bug?

Bug

What's the current behavior?

I'm able to render the calendar for first time and after that if there is any resource state update, it doesn't re-render the page to show new list of resources.
I'm not sure whether it's expected behavior or there is some error in my code.

My Code:
render() {
let eventList = [];
if (this.props.eventList && this.props.eventList instanceof Array) {
eventList = this.props.eventList
}

    let viewableResourceList = [];
    let completeResourceList = this.props.resourceList;
    if (completeResourceList && completeResourceList instanceof Array) {
        let j = 0;
        completeResourceList.map((resource, i) => {
            if (resource.active) {
                viewableResourceList[j++] = resource;
            }
        }
        );
    }
    console.log(2, "EventList : ", eventList, viewableResourceList)
    let output = null;
    if (viewableResourceList.length > 0) {
        let currentDateTime = new Date();
        output = <div>
            <p>{viewableResourceList.length}</p>
            <BigCalendar
                scrollToTime={currentDateTime}
                defaultDate={currentDateTime}
                localizer={localizer}
                defaultView={BigCalendar.Views.DAY}
                events={eventList}
                components={{
                    event: CustomEvent,
                    toolbar: CustomCalendarToolbar
                }}
                views={['day']}
                resources={viewableResourceList}
                resourceIdAccessor="resourceId"
                resourceTitleAccessor="resourceTitle"
                startAccessor="start"
                endAccessor="end"
                onSelectEvent={(event) => console.log("it is working", event)}

            />
        </div>
    }
    else {
        output = <div></div>
    }

    return (
        <div>
            {output}
        </div>
    );

}

What's the expected behavior?

It should update the resource list to display the latest list of resources.

[ihar-lapitski]

I'm faced with the same problem...

[aaronnuu]

Not a great solution but what I have done is just make they key of the calendar some value that only changes whenever the resource changes. This causes a full tear-down and remounting of the whole component so not the best but it does "work"

[ihar-lapitski]

Thanks aaronnuu! It helped me!

[dmitrykrylov]

Guys, we need to fix this thing:
https://github.com/intljusticemission/react-big-calendar/blob/07b2fa4ef876ecca21d9ac9a92bab4e0eda3e42e/src/TimeGrid.js#L69

It saves the computed value on TimeGrid initialization but it doesn't update it. As I understand, it's not enough to add same line in componentDidMount.

@jquense any ideas how to fix it in better way? What was the purpose of storing computed value as this.resources? Should we probably make this function memoizable and just to use this.getResources() everywhere you need the returned value?

[aaronnuu]

The computed resources needs to be in state, since changing the resources array will almost always lead to something new being rendered.

The fix should be as simple as storing resources in state and updating that state in componentDidUpdate.

[dmitrykrylov]

@aaronnuu no, computed resources shouldn't be in state, please, read this

I added a pull request, fixing this issue moving this computation to a separate class method and adding some memoize stuff

[aaronnuu]

@dmitrykrylov setting state from props is only an anti-pattern if the state isn't fully controlled by those props.

That being said, your solution is still probably the more correct one.