Make component draggable using react-dnd

Question

I'm trying to drag a component using react-dnd

I would try to make like this example but only dragging for the moment.

In my app on top of all component I import react-dnd-html5-backend and wrap my app:

import Backend from 'react-dnd-html5-backend'
import { DndProvider } from 'react-dnd'

render(
  <Provider store={store}>
    <FluentuiProvider theme={themes.teams}>
      <DndProvider backend={Backend}>
        <App theme={themes.teams} />
      </DndProvider>
    </FluentuiProvider>
  </Provider>,
  document.getElementById('root')
)

Then in my component:

import { useDrag } from 'react-dnd';

export default ({ call, pauseCall, onHoldCalls, endCall, addNote }) => {
  const [collectedProps, drag] = useDrag({
     item: { type: 'Personna' },
  })
  return (
     <div className="personna">
        <Persona ref={drag} {...call.CALL_DETAILS.personInfos["formattedPersData"]} size={PersonaSize.size40} />
     </div>
  )
}

When I render the component I get this error

TypeError: node.setAttribute is not a function at HTML5Backend.connectDragSource (HTML5Backend.js:487) at SourceConnector.reconnectDragSource (SourceConnector.js:115)

I haven't added a dragSource because in example it's not used.

I don't know why I'm getting this error message.

The ref should be given to a HTML element. You are passing it to a `Persona` component. Try to assign the ref to a html DOM like `div` — Panther, May 10 '20 at 15:22

score 1 · Accepted Answer · answered May 19 '20 at 10:02

As @Panther said, the ref should be placed on a HTML element, not a React Component:

return <div ref={drag}>{"Drag me!"}</div>;

Or, in your case, you could add the ref to the <div className="personna"> container:

return (
     <div ref={drag} className="personna">
        <Persona ....

To help you get to the minimal drag example, take a look at this very minimal setup:

App.js

import React from "react";
import Backend from "react-dnd-html5-backend";
import { DndProvider } from "react-dnd";
import { MyComponent } from "./MyComponent";
import "./styles.css";

export default function App() {
  return (
    <DndProvider backend={Backend}>
      <div className="App">
        <MyComponent />
      </div>
    </DndProvider>
  );
}

MyComponent.js

export default function App() {
  return (
    <DndProvider backend={Backend}>
      <div className="App">
        <MyComponent />
      </div>
    </DndProvider>
  );
}

Try it on codesandbox.io!

Make component draggable using react-dnd

1 Answers1