title: Using React Higher Order Component - Specifically react-sortable-hoc with redux
body: <p>I am having trouble understanding a very basic part of this HOC that has a good traction on NPM so I am guessing there is an obvious answer here I am missing.</p>
  
  <p>I have a TabListComponent which renders a list from a redux store:</p>
  
  <pre><code>return this.props.tabs.map((tab) =&gt; {
      return (&lt;li&gt;{tab.title}&lt;/li&gt;) 
  })
  </code></pre>
  
  <p>In my MainComponent class, I am importing the TabListComponent and the react-sortable-hoc </p>
  
  <pre><code>import TabListComponent from './tabListComponent';
  import { SortableContainer, SortableElement, arrayMove } from 'react-sortable-hoc';
  </code></pre>
  
  <p>I'm trying not to deviate too much from the documentation, so this is how I'm rendering the components</p>
  
  <pre><code>const SortableItem = SortableElement(TabListComponent); //I wrap TabListComponent directly 
  
  const SortableList = SortableContainer(() =&gt; {
      return (
          &lt;ul className="tabs-inline-block"&gt;
              &lt;SortableItem /&gt;
          &lt;/ul&gt;
      );
  });
  onSortEnd () {
      console.log("I don't need a callback, but this gets called anyway. Is this necessary?");
  }
  
  render () {
      return (
          &lt;div&gt;
              &lt;SortableList axis={'x'} onSortEnd={this.onSortEnd}/&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>
  
  <p>Initial 
  <a href="https://i.stack.imgur.com/uqngq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uqngq.png" alt="enter image description here"></a></p>
  
  <p>While dragging
  <a href="https://i.stack.imgur.com/3PYbf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3PYbf.png" alt="initial"></a></p>