I'm trying to implement a sortable list of sortable lists in React, using React DnD. Prior to implementing the drag and drop side of things, all was working well.

I have a container component, which renders this:

```
<DndProvider backend={Backend}>
                    {this.state.classifications.map((classification, index) =>
                        <Classification id={classification.id} classification={classification} reportTemplate={this} key={classification.id} index={index} />
                    )}
</DndProvider>

```

The Classification extends Component, constructed like this:

```
   constructor(props) {
        super(props);

        this.state = {
            isEditing: false,
            classification: props.classification
        };
    }

```

... and renders this (condensed for brevity):

```
<div className="panel-body">
    <DndProvider backend={Backend}>
        {this.state.classification.labels.map((label, index) =>
            <Label id={label.id} label={label} reportTemplate={this.props.reportTemplate} key={label.id} index={index} />
         )}
    </DndProvider>
</div>

```

In turn, the Label also extends component, constructed like this:

```
 constructor(props) {
        super(props);

        this.state = {
            isEditing: false,
            label: props.label
        };
    }

```

... and renders like this (again condensed for brevity):

```
return (
    <div className={"panel panel-default panel-label " + (isDragging ? "dragging " : "") + (isOver ? " over" : "")}>
        <div className="panel-heading" role="tab" id={"label-" + this.state.label.id}>
            <div className="panel-title">
                <div className="row">
                    <div className="col-xs-6 label-details">
                        {this.state.isEditing
                            ? <input type="text" className="form-control" value={this.state.label.value} onChange={e => this.props.reportTemplate.onLabelValueChange(e, this.state.label.classificationId, this.state.label.id, 'value')} />
                            : <p className="form-control-static">{this.state.label.value}</p>
                        }
                    <div className="subuser-container">...</div>
                </div>

            </div>
        </div>
    </div>
);

```

All of this works well - when the user makes a change from the Label child component, it gets updated in the root component and everything syncs up and refreshes.

However, when implementing React DnD, both the Classification and Label components have been wrapped in Drag and Drop decorators, to provide sorting. The sorting via drag and drop works perfectly. **However**: this has caused the updating of elements to stop working (i.e., when a change is made from the Label, the update is fed through to the root Component correctly, but it doesn't then refresh down the tree). 

Both the classification and label dnd implementations are like this in the render method:

```
return connectDropTarget(connectDragSource(...));

```

... and this when exporting the component:

```
export default DropTarget('classification', classificationTarget, classificationDropCollect)(DragSource('classification', classificationSource, classificationDragCollect)(Classification));

```

Interestingly, when a label is edited, the refresh does then occur when the user drags and drops the component. So its like the drag and drop will trigger a component refresh, but not the other `onChange` functions.

That was a long question, apologies. I'm almost certain someone else will have experienced this issue, so any pointers gratefully appreciated.