title: React-Dnd: Dynamic DropTarget and DragSource type
body: <p>I'm building a multi-level nestable drag and drop list. Each nested list needs to allow dragging only within itself. This requires setting a run-time <code>type</code> for the <code>DragSource</code> and <code>DropTarget</code>.</p>
  
  <p><strong>Compile time <code>type</code> declaration works but is limited</strong></p>
  
  <pre><code>export default flow(
    DropTarget(ItemLevel.ROOT, target, connect =&gt; ({
      connectDropTarget: connect.dropTarget(),
    })),
    DragSource(ItemLevel.ROOT, source, (connect, monitor) =&gt; ({
      connectDragSource: connect.dragSource(),
      isDragging: monitor.isDragging(),
    })),
  )(MenuItem)
  </code></pre>
  
  <p><strong>Runtime <code>type</code> declaration seems to work but throws errors on dragging</strong></p>
  
  <pre><code>export const getGroupMenuItem = menuGroupId =&gt; flow(
    DropTarget(menuGroupId, target, connect =&gt; ({
      connectDropTarget: connect.dropTarget(),
    })),
    DragSource(menuGroupId, source, (connect, monitor) =&gt; ({
      connectDragSource: connect.dragSource(),
      isDragging: monitor.isDragging(),
    })),
  )(MenuItem)
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/m2989.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/m2989.png" alt="enter image description here"></a></p>