title: React-sortable-hoc with formData
body: <p>In my case, I would like to develop a sortable form list. Unfortunately, the state of form is not updated after sorting. Please help. I stuck at this for a week. </p>
  
  <p>I am sorry that i do not know how to import the 'react-sortable-hoc' library to the follow JSFiddle.</p>
  
  <p>link: <a href="https://github.com/clauderic/react-sortable-hoc" rel="nofollow noreferrer">https://github.com/clauderic/react-sortable-hoc</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, {Component} from 'react';
  import {render} from 'react-dom';
  import {SortableContainer, SortableElement, arrayMove} from 'react-sortable-hoc';
  
  class ElementItem extends React.Component {
      constructor(props) {
          super(props);
  
          this.state = {
              value: this.props.value
          }
  
          this.handleInputChange = this.handleInputChange.bind(this);
      }
  
      handleInputChange(event) {
          const target = event.target;
          const value = target.type === 'checkbox' ? target.checked : target.value;
          const name = target.name;
  
          this.setState({
              [name]: value
          });
      }
  
      render() {
          return (
              &lt;input type="text" name="value" value={this.state.value} onChange={this.handleInputChange}/&gt;
          )
      }
  }
  
  const SortableItem = SortableElement(({value}) =&gt;
    &lt;li&gt;&lt;ElementItem value={value}/&gt;&lt;/li&gt;
  );
  
  const SortableList = SortableContainer(({items}) =&gt; {
    return (
      &lt;ul&gt;
        {items.map((value, index) =&gt; (
        var key = 'item-' + index;
          &lt;SortableItem key={key} index={index} value={value} /&gt;
        ))}
      &lt;/ul&gt;
    );
  });
  
  export default class SortableComponent extends React.Component {
   constructor(props) {
          super(props);
          this.state = {
              items: Array.apply(null, Array(100)).map((val, index) =&gt; 'Item ' + index)
          }
      }
      onSortEnd({oldIndex, newIndex}) {
          this.setState({
              items: arrayMove(this.state.items, oldIndex, newIndex)
          });
      }
      render() {
          return (
              &lt;SortableList items={this.state.items} onSortEnd={this.onSortEnd.bind(this)} helperClass="SortableHelper" /&gt;
          )
      }
  }
  
  render(&lt;SortableComponent/&gt;, document.getElementById('root'));</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="https://npmcdn.com/react-sortable-hoc/dist/umd/react-sortable-hoc.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="root"&gt;
    &lt;!-- This element's contents will be replaced with your component. --&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>