title: react-sortable-hoc: Handling of click event on list item
body: <p>This question is about <a href="https://github.com/clauderic/react-sortable-hoc" rel="nofollow noreferrer">https://github.com/clauderic/react-sortable-hoc</a>.
  I am pretty new to React, so I find the following a bit irritating. Go to
  <a href="https://jsfiddle.net/7tb7jkz5/" rel="nofollow noreferrer">https://jsfiddle.net/7tb7jkz5/</a>. Notice line 4</p>
  
  <pre><code>const SortableItem = SortableElement(({value}) =&gt; &lt;li className="SortableItem" onClick={console.debug(value)}&gt;{value}&lt;/li&gt;);
  </code></pre>
  
  <p>When you run the code, the console will log "Item 0" to "Item 99". A click on an item will log the same, but <strong>three</strong> times. Why does this happen? And is this really necessary or more like a bug?</p>
  
  <p>I expected a behavior similar to an ordinary DOM, so the click event would bubble up from the clicked item and could be caught along the way through its ancestors. The observed behavior looks to me like the click event would be sent down by the list to each list item three times.</p>
  
  <p><strong>Update:</strong>
  Well, this is actually as clear as crystal, thanks for pointing this out, Shubham. I did not just specify a reference, but an actual call to console.debug, which was executed every time the expression was evaluated. Common mistake.</p>
  
  <p>Still, this means, each list item is rendered (I guess) three times, when I click one of them. I suspect missing optimization or even useless redrawing.</p>