Use same element as target and source with hooks

When I use decorators I could use the same element as target and source:

let Node = ({ connectDragSource, connectDropTarget }) => {
  return connectDragSource(connectDropTarget(<div/>));
};

Node = compose(
  DropTarget(...),
  DragSource(...),
);

Could I implement the same behavior with hooks?

[mib32]

A nice working solution for custom component

import { useDrag, useDrop } from 'react-dnd'

function DraggableComponent(props) {
  /* ... */
 function attachRef(el) {
    drag(el)
    drop(el)
  }
  return <Grid ref={attachRef}>...</Grid>
}

[zouxuoz]

Sorry, I got some misunderstanding 😃

Solution:

const Node = () => {
  const [dragCollectedProps, connectDragSource] = useDrag(...);
  const [dropCollectedProps, connectDropTarget] = useDrop(...);

  return connectDragSource(connectDropTarget(<div/>));
};

P.S I could send PR with added this to FAQ if needed