title: How to maintain state of child components of Sortable container?
body: <p>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.</p>
  
  <p>How can I achieve these sortable Child components to be rendered on each state change?</p>
  
  <p>Here's the code (simplified):</p>
  
  <p>App.js:</p>
  
  <pre><code>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 (
        &lt;div className="App"&gt;
          &lt;Sortable&gt;
            &lt;Child text={this.state.text1} /&gt;
            &lt;Child text={this.state.text2} /&gt;
          &lt;/Sortable&gt;
          &lt;Child text={this.state.text1} /&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>Child.js:
  import React from 'react';</p>
  
  <pre><code>export default class Child extends React.Component {
      constructor(props) {
          super(props);
      }
  
      render() {
          return (&lt;p&gt;{this.props.text}&lt;/p&gt;)
      }
  }
  </code></pre>
  
  <p>How the page looks like when loaded:</p>
  
  <p><img src="https://i.stack.imgur.com/Cg4Kh.png" alt="["></p>
  
  <p><img src="https://i.stack.imgur.com/OllCc.png" alt="["></p>
  
  <p>... and after state is updated:</p>
  
  <p><img src="https://i.stack.imgur.com/3V9Ym.png" alt="["></p>
  
  <p><img src="https://i.stack.imgur.com/aF7gE.png" alt="["></p>