ReorderMenu.js

renderMenuItems() {
        let i = 0;

        return this.props.sections.map((section, index) => {
            i ++;
            return [
                <MenuItemTarget
                    onDrop={this.handleDrop}
                    position={index - 1}
                    key={i * 100}
                />,
                <MenuItem
                    key={i}
                    section={section}
                    active={false}
                >
                    {section.title || 'Untitled'}
                </MenuItem>,
                (index === this.props.sections.length - 1) ? <MenuItemTarget
                        onDrop={this.handleDrop}
                        position={index}
                        key={i * 1000} />
                    : null,
            ]
        });

    }

    // Reorders sections
    handleDrop = (props, monitor, component) => {
        const sections = _.clone(this.props.sections);
        const droppedSection = monitor.getItem();
        let newPosition = props.position;
        const oldPosition = droppedSection.position;

        if (newPosition === oldPosition) {
            return;
        }

        // Funky math just to get the positioning to work properly.
        if (newPosition <= oldPosition - 1) {
            newPosition += 1;
        }

        // move is defined above
        const movedSections = move(sections, oldPosition, newPosition);
        const reorderedSections = movedSections.map((section, index) => {
            section.position = index;
            return section;
        });

        return this.props.reorderSections({
            articleUuid: this.props.article.uuid,
            sections: reorderedSections,
        });
    }