How do I invoke a reorder on the destination droppable from within the top component in the React tree?

[sfaigan]

In the documentation for react-beautiful-dnd, it says

It is advised to just wrap your entire application in a DragDropContext.

So, I put the DragDropContext in my highest component in the tree, App.js (ignoring index.js). However, DragDropContext requires an onDragEnd prop, which usually sorts the droppable and updates what items are in that droppable.

In my code, <MainView /> will contain several droppables, and <ItemList /> will contain one droppable that will contain all the draggables to begin with.

 // App.js

import React, { Component } from 'react';
import { Grid } from 'semantic-ui-react';
import MainView from './MainView';
import ItemList from './ItemList';

class App extends Component {
    constructor(props) {
        super(props);
        this.onDragEnd = this.onDragEnd.bind(this);
    }

    onDragEnd(result) {
        if (!result.destination) {
            return;
        }
        // reorder the destination list
        // set the state of the destination component
    }    

    render() {
        return (
            <div className="App">
                <DragDropContext onDragEnd={this.onDragEnd}>
                    <Grid columns={2}>
                        <Grid.Column width={13}>
                            <MainView />
                        </Grid.Column>
                        <Grid.Column width={3}>
                            <ItemList />
                        </Grid.Column>
                    </Grid>
                </DragDropContext>
            </div>
        );
    }
}

export default App;

Would it make more sense to have multiple DragDropContexts? One within MainView and another within ItemList? Can you move a draggable between two droppables that are contained within two separate DragDropContexts?

I tried using a DragDropContext in each Droppable component but I couldn't figure out how to move a draggable between DragDropContexts.

Any help is appreciated!

Thanks, Shea

[alexreardon]

Yes it makes sense to have multiple contexts No you cannot move something from one drag drop context to another

If you want lots of different drag and drop interactions on the page you will probably need to come up with a way of rolling up your logic into the single onDragEnd handler. You can use similar strategies to that of reducer composition

I cannot think of another way at the moment