Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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>
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?
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>
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.