React-dnd: useDrop DropTargetHookSpec accept type should include a function type

Created on 20 Aug 2020 · 3Comments · Source: react-dnd/react-dnd

Describe the bug
Your documentation of useDrop says that the specification object member accept is "A string, an ES6 symbol, an array of either, or a function that returns either of those, given component's props.".
But in the code, accept is defined as TargetType, which is string | symbol or an array of those.

Expected behavior
accept should be a type where a function which returns TargetType is possible.

Additional context
I want to update accept dynamically. I thought this would be possible by changing the accept value of useDrop but this doesn't work. I currently don't see how to do this otherwise and I can't find the behavior the documentation describes.

Source

TheBolliwood

👍2

Most helpful comment

I know this isn't an ideal solution, but until this is solved and we can have target type-production functions, a workaround would be to use a key property equal to your accepted types on the component which contains your drop target. This would ensure that it re-mounts once you change the acceptable type(s). I just ran into this exact issue myself today.

johanneslumpe on 20 Aug 2020

👍2

All 3 comments

johanneslumpe on 20 Aug 2020

👍2

I noticed this too, but got around it by using canDrop.

dhulme on 6 Oct 2020

👍1

I know this isn't an ideal solution, but until this is solved and we can have target type-production functions, a workaround would be to use a key property equal to your accepted types on the component which contains your drop target. This would ensure that it re-mounts once you change the acceptable type(s). I just ran into this exact issue myself today.

Just to echo this comment: I had a situation where I had a ternary that was rendering two versions of the same component based on a boolean. Clever react realized they are the same component but with different props. Although I tried to use this ternary to render them as independent nodes that mount/unmount based on the boolean, it was actually rerendering instead of remounting. Thus, the accept was based on the original props, not the new ones, and useDrop doesn't update based on that prop changing.