react-dnd: Uncaught Error: Invariant Violation: Expected to find a valid target.

Just in case someone stumbles on this error and issue, I had a similar issue when composing a sortable list and each item having a key composed of the concatenation of its id and its index on the list. The fix was simply done by setting a proper (ie, consistent) key for the element being dragged.

If someone still runs in this issue, please note that the element of the list you are mapping by needs to have a persistent key prop. In my case I was dispatching a Redux action to change the items in list, and then providing the key to the mapped element like this:

blocks.map((block, idx) => {
  <React.Fragment key={`${block.name}_${idx}`}>
    ...
  <React.Fragment />
})

which apparently fires the error, because the idx is changing on-the-fly.

Sorry for adding to an old thread, but since this is the only reference to this error on all of the internet, I thought someone might find the following useful in the future.

I had the same error, but the issue was that I had a component (similar to Card in the examples) that was decorated with both drag and drop wrappers.

When simulateBeginDrag began, it sent the drop target (instead of the drag source) to the validator, which correctly failed. The solution was to go one level deep ( with getDecoratedComponentInstance() ) when getting the handler id.

I had the same problem, and I fixed it like this:

my code looked like

const ParentOfCards = () => {    
   
     const [ cards, setCards ] = useState([ ... ])

    const CardComponent = ({ card, index }) => {
       return (/**/)
    }
    return (
        <div>
            { cards.map( CardComponent ) }
        </div>
    )
    
}

it turns out you can’t put CardComponent inside ParentOfCards ( I think it has to do with re-renders ), so I solved it separating CardComponent from the ParentOfCards scope:

const ParentOfCards = () => {    
   
     const [ cards, setCards ] = useState([ ... ])

    
    return (
        <div>
            { cards.map( CardComponent ) }
        </div>
    )
    
}

const CardComponent = ({ card, index }) => {
       return (/**/)
}

And now ( after two days of debugging :c ) it works! 😁

For me this error is caused by dynamically created drop areas - when the last item is moved from a drop area React re-renders without that area and this seems to cause the exception. Perhaps it’s a race condition where the area is removed just before moving the item though the groups are derived from the same items change hmm

thanks @chulanovskyi for me it looked like this:

arr.map((item, idx) => (
    <Item
        item={item}
        // key={`${idx}_${item.id}`} // this was busted because idx
        key={item.key} // when adding this to the array elsewhere i use a count for uniqueness
        index={idx}
    >
    </Item>
))```

For me this error is caused by dynamically created drop areas - when the last item is moved from a drop area React re-renders without that area and this seems to cause the exception. Perhaps it’s a race condition where the area is removed just before moving the item though the groups are derived from the same items change hmm

Hi @DominicTobias I also have dynamically created drop areas. How did you fix it?

@marcelomrtnz Thank you so much You saved my lot of time on this issue on mobile

I was facing same issue while drag drop on mobile with react dnd lib but after removing row column divs from list and keeping only cards list it worked for me without this error. It got that valid target on mobile browser

I got this idea from your post so thank you @marcelomrtnz

@yannisbarlas great find. I ran into the same exact issue. Maybe there can be a mention of this in the testing docs?

I added a debounce to the hover handler (with trailing option) and that solved the issue. The components were updating too quickly by setting the state before DnD could catch up, and the target ID had changed by the time the user dropped the item. So for those of you that could get the above solutions to work, maybe this may help.

Very simple example of the problem, move any box and the error is fired, any idea how to fix this? https://codesandbox.io/s/shy-moon-3q33r?file=/src/Container.jsx

Try adding the key={card.id} prop to the Grid instance instead of the Card inside the renderCard function. Always add a unique key to the component that is directly being used in a map function. This seems to solve the issue.

Funny enough I have this same problem in my code and cannot solve it, got slight more complex code with virtualised list :<

I have the same issue. https://codesandbox.io/s/proud-wind-hklt6?file=/src/CreateForum.jsx Here is sandbox. drag item 1ba over item 1, and then item 1ba down again.

I also have this issue. In my case it only happens when drop target returns false on canDrop. Can anyone post your solution to this problem? Someone mentioned that it’s related to missing ID, but I’m not sure where to put the id?

@raymond-ong

I also have dynamically created drop areas. How did you fix it?

In other words the problem can be that you’ve created parent (upper level) component again. In this case react-dnd lost id (his inner id) it has working with and output error.

In my case it was, that I’ve updated id parameter of the parent entity when update state in the reducer (move columns within row, and update row id when columns change their places). After removing updating id functionality everything starts working correctly.