React DnD Expected to find a valid target

Question

Looks like React DnD expects draggable/droppable items to be siblings in order to work properly. If one of the items belongs to another parent I get "Expected to find a valid target." as soon as the drag over event fires (when the swap should trigger).

I tweaked an example from their docs in case anyone would like to try it out: broken example: https://codesandbox.io/s/broken-feather-qf0f2?file=/src/Container.jsx

Tweaks are at the bottom. Note that the first card item is rendered separately from the remaining ones, in another div.

In order to trigger the error just drag & drop the first item into another one. Notice that if you drag & drop any other items they will work.

original example: https://codesandbox.io/s/github/react-dnd/react-dnd/tree/gh-pages/examples_hooks_js/04-sortable/simple?from-embed=&file=/src/Container.jsx

Thank you!

Answer 1

From the issue that I had, the hover handler was updating the table/grid too fast. It was setting the state of the items and I guess DnD applies a new target id, hence the error.

Try adding a debounce on the hover handler with trailing option set to true. The problem is that the component is updating too quickly and the target id that DnD is expecting, has already changed due to the state change. It may help to add some checks in there to make sure that the item is droppable as well.

Answer 2

Could be an issue with react-dnd.

Check out this issue https://github.com/react-dnd/react-dnd/issues/361