Nested Drag and Drop with react-beautiful-dnd

just give type to your outer and inner droppable, on drag end you have to check the type of your droppable,and reorder accordingly.

onDragEnd = ({ type, destination, source }) => {

    if (source && destination && type) {
        let parentId = source.droppableId;
        let srcIndex = source.index;
        let destIndex = destination.index;

        if (type == "Inner") {
            //method for reordering the order of the inner items
            reorderInner(parentId, srcIndex, destIndex)
        }
        else if (type == "Outer") {
            //method for reordering the order of parent items
            reorderOuter(srcIndex,destIndex)
        }
    }

};

react-beautiful-dnd doesn't support nested drag-drop as of now and it's low priority item as per their roadmap. You need to handle everything on outer <DragDropContext onDragEnd={this.handleDragEnd}>. It doesn't give parent information by default in result object, so I have kept that information in child Droppable component. See the below demo if this works for you.

Code: https://codesandbox.io/s/jp4ow4r45v

Edit: Refer below sandbox for a more generic code snippet where you will be able to apply nested drag-drop across parent container.

Code: https://codesandbox.io/s/5v2yvpjn7n