title: How to change the position of the element dynamically in ReactJs?
body: <p>I am using ReactJs. I want to change a position of the image dynamically. </p>
  
  <p>I am trying to set up style like described <a href="https://stackoverflow.com/questions/22291913/how-to-change-reactjs-styles-dynamically">here</a>: </p>
  
  <p>My sprite.js:</p>
  
  <pre><code>'use strict';
  import '../res/my_css.css'
  
  const React = require('react');
  const ReactDOM = require('react-dom');
  
  class Sprite extends React.Component {
    render() {
      var left = 5000 + 'px';
      var top = 5000 + 'px';
      var padding = 5000 + 'px';
      return (
          &lt;div id="bird" style={{padding:padding, left: left, top:top}}/&gt;
      )
    }
  }
  
  export default Sprite;
  ReactDOM.render(
    &lt;Sprite /&gt;,
    document.getElementById('sprite')
  )
  </code></pre>
  
  <p>My css contains:</p>
  
  <pre><code>#bird {
    background:url('../res/bird.png');
    background-repeat: no-repeat;
  }
  </code></pre>
  
  <p>I see the image, but <code>style={{padding:padding, left: left, top:top}}</code> does not applied. </p>
  
  <p>If I look to the source code in Chrome, I see the style <code>padding:5000px, left:5000px, top:5000px</code>. But my image is in the left top corner.</p>
  
  <p>How can I dinamically change the position of the div element (image in my case) in ReactJs?</p>