Search code examples
javascriptreactjssortables

How to maintain state of child components of Sortable container?

As shown in the code below, the App component has a state. The properties of this state are passed down to the Child components via props. But as soon as the state changes in the App component, the Child components inside the Sortable component are not updated. But Child components outside the this Sortable container is updated (rerendered) as usual.

How can I achieve these sortable Child components to be rendered on each state change?

Here's the code (simplified):

App.js:

import Sortable from 'react-sortablejs';
import Child from './Child';


class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      text1: "Text1",
      text2: "Text2"
    }
  }

  render() {
    return (
      <div className="App">
        <Sortable>
          <Child text={this.state.text1} />
          <Child text={this.state.text2} />
        </Sortable>
        <Child text={this.state.text1} />
      </div>
    );
  }
}

Child.js: import React from 'react';

export default class Child extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (<p>{this.props.text}</p>)
    }
}

How the page looks like when loaded:

[

[

... and after state is updated:

[

[

Solution

  • It looks like the Sortable component overrides shouldComponentUpdate here:

    shouldComponentUpdate(nextProps) {
    // If onChange is null, it is an UnControlled component
    // Don't let React re-render it by setting return to false
    if (!nextProps.onChange) {
         return false;
    }
    return true;
}

    Basically, it's set to only change if there is an onChange handler. You'd want to pass a method like that to determine what to do (if anything) when the state of App changes.