title: React does not update style on rerender
body: <p>I have a React component, which visibility and position can be changed by the user.</p>
  
  <p>The visibility by adding and removing a CSS class, the position by a function, which sets the new position after Drag &amp; Drop as top and left.</p>
  
  <p>That works, but my problem is that React does not update the style (and therefore does not rewrite the position to initial), when the component gets rerendered for the visiblity.</p>
  
  <pre><code>class MoveableCard extends React.Component {
      ...
      render() {
          ...
          return &lt;div className={(this.props.isVisible ? '' : 'hide')}
                      draggable="true" onDragStart={dragStart}
                      style={{top:'initial', left:'initial'}}&gt;
              ...
          &lt;/div&gt;
      }
  }
  
  
  
  function dragStart(event) {
      var style = window.getComputedStyle(event.target, null)
      event.dataTransfer.setData("text/plain", JSON.stringify({
          id:event.target.getAttribute('data-reactid'),
          x:(parseInt(style.getPropertyValue("left"),10) - event.clientX),
          y:(parseInt(style.getPropertyValue("top"),10) - event.clientY)
      }))
  }
  function dragOver(event) {
      event.preventDefault()
      return false
  } 
  function drop(event) {
      let data = JSON.parse(event.dataTransfer.getData("text/plain"))
      let el = document.querySelectorAll("[data-reactid='" + data.id + "']")[0]
  
      el.style.left = (event.clientX + parseInt(data.x, 10)) + 'px'
      el.style.top = (event.clientY + parseInt(data.y, 10)) + 'px'
  
      event.preventDefault()
      return false
  }
  document.body.addEventListener('dragover',dragOver,false)
  document.body.addEventListener('drop',drop,false)
  </code></pre>
  
  <p>When the Card is rendered for the first time, the style looks like <code>style="top: initial; left: initial;"</code>.</p>
  
  <p>When the Card gets moved, the style looks like <code>style="top: 162px; left: 320px;"</code>.</p>
  
  <p>When the Card is closed, the class <code>hide</code> gets added, but the style remains <code>style="top: 162px; left: 320px;"</code>, no matter, how I create the style object.</p>
  
  <p>So, how can I force React to update the style?
  Or is there another way to accomplish this?</p>