CODEWITHSUNDEEP
reactjsreact-dnd
moon
moon

Reputation: 71

ReactDnD : connectDragSource is not a function

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

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 = this.props.id;
        var isDragging = this.props.isDragging;
        var connectDragSource = this.props.connectDragSource;
        return (
          <div className="item">
               {this.props.children}
          </div>
        );
     }

});

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

Upvotes: 1

Views: 2533

Answers (1)

Edgesoft
Edgesoft

Reputation: 282

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,
    DecoratedComponent,
    getType,
    collect,
    options
  });

};

So you need to handle the returned function

Upvotes: 2

Related Questions