ReactDnD : ConnectDragSource Is Not A Function

- 1 answer

I have a top-level component that consists of a few different components.

  • InventoryBox - designates the space that an inventory contains
  • InventoryList - designates the list of items in the inventory
  • Item - a single item in the inventory list

InventoryBox is the top-level component, so I have wrapped it in a DragDropContext. The issue I am running into is that the connectDragSource function that I specified in my collect function is not injecting the method into my item components.

My Collect Function

function collect(connect, monitor) {
    return {
        connectDragSource: connect.dragSource(),
        isDragging: monitor.isDragging()

My Item Component

var Item = React.createClass({
    render: function(){
        var id =;
        var isDragging = this.props.isDragging;
        var connectDragSource = this.props.connectDragSource;
        return (
          <div className="item">


My ultimate goal would be to drag the Item components from the list to another Inventory Box.



When you are using Item in the Item inventoryList you are just using the Item not the wrapped one. var Item = React.... but you need to declare a variable.

var ItemWrapped = DragSource(Types.INVENTORY, itemSource, collect)(Item);
// Use the ItemWrapped instead.... the same goes for all

The DragSource returns this in the source

 return function decorateSource(DecoratedComponent) {
  return decorateHandler({
    connectBackend: (backend, sourceId) => backend.connectDragSource(sourceId),
    containerDisplayName: 'DragSource',
    createHandler: createSource,
    registerHandler: registerSource,
    createMonitor: createSourceMonitor,
    createConnector: createSourceConnector,


So you need to handle the returned function