Move among different containers

[yanielbf]

Hi, guys I need move draggable items among different containers. When i do it the property addedIndex in dropResult params of onDrop is null. How fix this. My code:

import React, {Component} from "react";
import {Container, Draggable} from "react-smooth-dnd";
import {applyDrag} from "./utils";
import _ from "lodash"

class Grid extends Component {
    state = {
        items: [
            {value: 1, order: 2000},
            {value: 2, order: 4000},
            {value: 3, order: 6000},
            {value: 4, order: 8000},
            {value: 5, order: 10000}]
    }

    onDrop = (dropResult) => {
        const {removedIndex, addedIndex, payload} = dropResult;
        const {items} = this.state;
        const index = addedIndex + (removedIndex > addedIndex ? -1 : 1);
        let orderResult = 0;
        if (!items[addedIndex] || !items[addedIndex]['order']) {
            orderResult = 2000;
        }
        if (index < 0) {
            orderResult = items[addedIndex]['order'] - 100;
        } else if (index >= items.length) {
            orderResult = items[addedIndex]['order'] + 100;
        } else {
            if (removedIndex > addedIndex) {
                orderResult = (items[addedIndex]['order'] + items[addedIndex - 1]['order']) / 2;
            } else {
                orderResult = (items[addedIndex + 1]['order'] + items[addedIndex]['order']) / 2;
            }
        }

        let newItems = items.slice(0);
        newItems[removedIndex]['order'] = orderResult;
        newItems = _.orderBy(newItems, ['order'], ['asc']);
        this.setState({items: newItems})
        return orderResult;
    }

    render() {
        const {items} = this.state;
        return <div>
            <Container
                groupName="milestone"
                getChildPayload={index => index}
                onDrop={this.onDrop}>
                {items.map(item => {
                    return <Draggable key={item.value}>
                        {item.value}
                    </Draggable>;
                })}
            </Container>
            <Container
                groupName="milestone"
                getChildPayload={index => index}
                onDrop={this.onDrop}>
                {items.map(item => {
                    return <Draggable key={item.value}>
                        {item.value}
                    </Draggable>;
                })}
            </Container>
        </div>;
    }


}

export default Grid;

[kutlugsahin]

addedIndex will be null for first container and not null for second container. And I see that the same list is used by both containers which will result in some issues. Maintain 2 lists for two containers and modify them according to the dropResults. See demo application codes.