React-sortable-hoc: State is not maintaining on sorting

[Dipen-Dedania]

I'm trying out a sample using react-sortable-hoc. Sortables are failed to keep the state on sorting. Have a look at the GIF.

Below is my sample code..

import React, {Component} from 'react';
import {SortableContainer, SortableElement, arrayMove} from 'react-sortable-hoc';
// Css
import './object_library.css'

const SortableItem = SortableElement(({value}) =>
    <div className="Showcase_test_horizontalItem" >
        <div>{value}</div>
        <br />
        <TestSortable />
    </div>
);

const SortableList = SortableContainer(({items}) => {
    return (
        <div>
            {items.map((value, index) => (
                <SortableItem key={`item-${index}`} index={index} value={value} />
            ))}
        </div>
    );
});

class TestSortable extends Component {
    constructor(props) {
        super(props);
        this.state = {
            sum: 0
        }
        this.onAddChild = this.onAddChild.bind(this)
    }
    onAddChild () {
        let prevSum = this.state.sum + 1;
        this.setState({
            sum: prevSum
        });
    }
    render() {
        return (
            <div>
                <div> {this.state.sum} </div>
                <button className="my_plus_buttons" onClick={this.onAddChild}>+</button>
            </div>
        );
    }
}

class SortableComponent extends Component {
    state = {
        items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'],
    };
    onSortEnd = ({oldIndex, newIndex}) => {
        this.setState({
            items: arrayMove(this.state.items, oldIndex, newIndex),
        });
    };
    render() {
        return <SortableList items={this.state.items} onSortEnd={this.onSortEnd} axis="x"/>;
    }
}

export default SortableComponent;

I'm not sure of how to solve this. Any ideas folks?

[jakedowns]

Issue here is how react is reusing components based on their key,
on sort update, it's essentially swapping the <TestSortable> nested elements so they're always in the original order.

If you change the reference key from index to the value string, your code will work:
key={`item-${index}`} -> key={`item-${value}`}

Example: https://codesandbox.io/s/7L1v85Jq1

[Dipen-Dedania]

It worked. Thanks @jakedowns. Closing the issue.