React-big-calendar: Drag and Drop : Custom props in custom component does not work

[ronakruparel]

Do you want to request a _feature_ or report a _bug_?

BUG

What's the current behavior?

• Using <DragAndDropCalendar/> component and adding a custom toolbar in components prop
• Passing some custom props to custom toolbar component
  Eg. In below sandbox passing switchView prop
• Only initial value is passed
• Updated value on re-render is not passed

NOTE: this behaviour is noticed in functional implementation using hooks in classical component this things works well

For bugs, please include the following if possible:

-Browser - Google Chrome
-OS - MacOS
-react-big-calendar - 0.26.1
-codesandbox : https://codesandbox.io/s/react-big-calendar-6oq3f

What's the expected behavior?

• The updated value of props should be passed

[JesseyStend]

I noticed this as well, for some reason any custom component with custom props only update the prop when mounting, and after that, it stays in that state no matter what. I am working on a workaround. I will update you if I found a solution.

[JesseyStend]

So I kinda fixed it by making a wrapper class component and passing the props over to the actual Calendar like this.

class ScheduleWrapper extends React.Component {
  render() {
    return (
      <DragAndDropCalendar
        {...this.props}
        components={{
          toolbar: (toolbar) => CustomToolbar(toolbar, this.props.yourVariable),
        }}
      />
    );
  }
}

const YourComponent = ({ }) => {

return (
      <ScheduleWrapper
        yourVariable={yourVariable}
        yourOtherPropsLikeEventsAndSettings
      />
  );
}

[alisakova]

@JesseyStend hello! I was looking for solution for this too, tried your solution. But it seems not ok :( Also I rewrite func component to class component and custom eventWrapper doesn't work too. That's strange.

[shubhambisht541]

@JesseyStend @alisakova Any update on this the custom toolbar is not working with drag and drop on react-big-calender ??

[bilobom]

This is most probably because in withDragAndDrop.js HOC, the components props is being merged with passed components
here where components being merged with DnD wrappers

constructor(...args) {
      super(...args)

      const { components } = this.props

      this.components = mergeComponents(components, {
        eventWrapper: EventWrapper,
        eventContainerWrapper: EventContainerWrapper,
        weekWrapper: WeekWrapper,
      })

      this.state = { interacting: false }
    }

and then passed to Calendar like this

return (
        <Calendar
          {...props}
          elementProps={elementPropsWithDropFromOutside}
          components={this.component}
        />
      );

The components is being updated only at construction time on the constructor. I guess they did this to prevent re-mounting of all components at each re-rendering.

Many users seems to have this problem some uses drag and drop , all the recommendation for passing props to components won't fix it for Calendar using withDragAndDrop HOC because of this.

possible related issues are #1797 #1731 #1733