Pass an existing backend to withDragAndDrop - a practical example

I’m attempting to use react-dnd and react-big-calendar withDragAndDrop in an app together. However, if I initiate them separately, I get an error:

Uncaught Error: Cannot have two HTML5 backends at the same time.

I know this error has already been discussed in a few tickets, like this one. However, looking at the current documentation of withDragAndDrop it appears that the solution in the PR linked from above-mentioned ticket has been replaced with an optional backend that can be passed.

The big question for me is - how do I get the same backend instance so I can use it in two places?

Here’s my code:

App.js

import React from 'react'
import {DragDropContext} from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'
import Calendar from './Calendar'

class App extends React.Component {
  render() {
    return {
      <div>
        ...
        <Calendar />
      </div>
    }
  }
}

export default DragDropContext(HTML5Backend)(App)

Calendar.js

import React from 'react'
import BigCalendar from 'react-big-calendar'
import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop'

const Calendar = withDragAndDrop(BigCalendar)
...

As you can see, my Calendar component is a child of my App component where I set the react-dnd DragDropContext. So, how do I pass the same backend instance down to the Calendar component?

react-dnd documentation for DragDropContext mentions an instance method getManager() which should help me retrieve the backend (getManager().getBackend()). However, the key here is instance method. How do I get the instance of DragDropContext(HTML5Backend)(App) from my Calendar.js file?

I’m quite new to React, and I have a feeling the answer is quite trivial, I just can’t figure it out. I will appreciate any help!

[artooras]

We have. Just for those running into the same issue and looking for an answer, the secret is to explicitly omit a backend from withDragAndDrop, like so:

const DragAndDropCalendar = withDragAndDrop(BigCalendar, { backend: false })

[AbeCole]

+1 @artooras Thank for you this, have just spent many hours trying to find/understand what to do here with a lot of different threads giving help but no real answer. If you hadn’t added this comment I would still be wondering what you managed to resolve on Discord.