Minimal react-dnd hooks example breaks on "Expected drag drop context"

Question

I constructed a minimal example of the react-dnd hooks API in practice and it runs into a runtime error:

import { useDrag, useDrop, DndProvider } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";

export default function App() {
  var matchDrag = useDrag({
    type: "FILE"
  });
  var matchDrop = useDrop({
    accept: "FILE",
    drop: function (item, monitor) {
      console.log("dropped");
    }
  });

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <DndProvider backend={HTML5Backend}>
        <div ref={matchDrag[1]}>Drag</div>
      </DndProvider>
      <DndProvider backend={HTML5Backend}>
        <div ref={matchDrop[1]}>Drop</div>
      </DndProvider>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

Here is the full reproduction in CodeSandbox: https://codesandbox.io/s/long-rgb-c4i69?file=/src/App.js.

Any thoughts on what could be the problem here?

Answer 1

DndProvider has to be external of the component in which useDrag / useDrop hooks are used. It should be factored out of the App component like so:

<DndProvider backend={HTML5Backend}>
  <App />
</DndProvider>