React-sortable-hoc: render issue after sort.

[ivercinsky]

import React, { Component } from 'react';
import {Panel, FormControl, Table, Button} from 'react-bootstrap';
import {SortableContainer, SortableElement} from 'react-sortable-hoc';


const SortableItem = SortableElement(({key, index, attr, collection}) =>
    <tr>{Object.keys(attr).map((prop, index2) => (
           <td key={index + "" + index2}><FormControl key={key} type="text" defaultValue={attr[prop]}/>
</td>
        ))}
    </tr>
);

const SortableList = SortableContainer(({attrs, collection}) => {
  return (
    <tbody>
      {attrs.map((attr, index) => (
        <SortableItem key={`item-${index}`} index={index} attr={attr} collection={collection} />
      ))}
    </tbody>
  );
});



class ListAttributes extends Component {
    capitilize(string) {
        const words = string.split("_");
        const capWords = words.map((word) => {
            const firstLetter = word[0].toUpperCase();
            const tailWord = word.substring(1);
            return firstLetter + tailWord;
        });
        return capWords.join(" ");
    }
    render() {
        return (
            <Panel header={this.props.title || "no title"}>
                <Table striped bordered condensed hover>
                    <thead>
                        <tr>
                            {
                                Object.keys(this.props.attrs[0]).map((key) => (
                                    <th key={key}>{this.capitilize(key)}</th>
                                ))
                            }
                        </tr>
                    </thead>
                    <SortableList attrs={this.props.attrs} collection={this.props.title} onSortEnd={this.props.onSortEnd} />
                </Table>
                <Button onClick={this.props.handleClick} bsStyle="success">Add New {this.props.title}</Button>
            </Panel>
        );
    }
}
export default ListAttributes;

This is my Sortabale Component. Its getting his state from a ParentComponent as well as the onSortEnd function to change the state with the new order of items.

This is the function

  onSortEnd(data, e) {
    var new_state = Object.assign(this.state);
    var new_attrs = arrayMove(new_state[data.collection].attrs, data.oldIndex, data.newIndex);
    new_state[data.collection].attrs = new_attrs;
    this.setState(new_state);
  }

The problem is that the state of the App changes ok, But it doesnt get rendered.

This is the project repo

https://github.com/ivercinsky/brew_master_front

[ivercinsky]

So the issue was mine.

The collection i was sorting didnt have an 'id' key. So react didnt realize that he had to re-render

[clauderic]

Thanks for following up!