I am using ReactJs. I want to change a position of the image dynamically.

I am trying to set up style like described here:

My sprite.js:

'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 (

        <div id=bird style={{padding:padding, left: left, top:top}}/>

    )

  }

}



export default Sprite;

ReactDOM.render(

  <Sprite />,

  document.getElementById('sprite')

)

My css contains:

#bird {

  background:url('../res/bird.png');

  background-repeat: no-repeat;

}

I see the image, but style={{padding:padding, left: left, top:top}} does not applied.

If I look to the source code in Chrome, I see the style padding:5000px, left:5000px, top:5000px. But my image is in the left top corner.

How can I dinamically change the position of the div element (image in my case) in ReactJs?