title: Style does not update when state is updated
body: <p>I am doing a carousel and my inline translate is not working when state updates.</p>
  
  <p>Here is my component:</p>
  
  <pre><code>class Carousel extends React.Component {
    constructor() {
      super();
      this.state = {
        hover: false,
        containers: 0,
        imgList: [],
        translate: 0,
        fullWidth: 0,
        width: 0
      };
      this.height = 400;
  
      this.moveLeft = this.moveLeft.bind(this);
      this.moveRight = this.moveRight.bind(this);
    }
  
    componentWillMount() {
      const imgList = [
        'http://2.bp.blogspot.com/--r4xdyuNQCQ/UAu7wFbDfDI/AAAAAAAAIUg/qtlUyQ8XKYM/s1600/Hdhut.blogspot.com+%2811%29.jpeg',
        'http://4.bp.blogspot.com/-BJaTlb_j_Fw/TwK1agDhf-I/AAAAAAAABb0/nvYDoNoSCPk/s1600/singapore-wallpaper-2-778799.jpg',
        'http://greatinspire.com/wp-content/uploads/2016/06/Most-Beautiful-Places-In-Japan-9.jpg',
        'http://www.thetravelexperts.net/gallery/places-to-visit-in-france/9_eiffel_tower.jpg'
      ];
  
      this.setState({ imgList: [...imgList] });
    }
  
    moveLeft() {
      const { translate, fullWidth } = this.state;
      this.setState({ translate: translate + fullWidth });
    }
  
    moveRight() {
      const { translate, fullWidth } = this.state;
      this.setState({ translate: translate - fullWidth });
    }
  
    componentDidMount() {
      const fullWidth = document.body.clientWidth;
      const width = fullWidth / 2;
      this.setState({ fullWidth, width });
    }
  
    render() {
      const { imgList, translate, fullWidth, width } = this.state;
      return (
        &lt;nav className={style.wrapper} style={{ height: this.height }}&gt;
          &lt;div className={style.arrows} style={{ width: `${fullWidth}px` }}&gt;
            &lt;div className={style['arrow-left']} onClick={this.moveLeft} /&gt;
            &lt;div className={style['arrow-right']} onClick={this.moveRight} /&gt;
          &lt;/div&gt;
          &lt;ul
            className={style.ul}
            style={{ transform: `translateX(${translate})` }}
          &gt;
            {imgList.length &gt; 0 &amp;&amp;
              imgList.map(src =&gt;
                &lt;li
                  key={src}
                  className={style.li}
                  style={{ width: `${width}px` }}
                &gt;
                  &lt;figure className={style.figure}&gt;
                    &lt;img className={style.img} width={width} src={src} /&gt;
                  &lt;/figure&gt;
                &lt;/li&gt;
              )}
          &lt;/ul&gt;
        &lt;/nav&gt;
      );
    }
  }
  
  export default Carousel;
  </code></pre>
  
  <p>This code basically take my ul element and translate it to left and to right to show my images.
  I tried to use this.forceUpdate in the final of moveRight and moveLeft, but it did not work.</p>
  
  <p>What is wrong?</p>