title: React.js: how to make inline styles automatically update progress bar on state change
body: <p>I have a progress bar that I am building in React.js and Zurb Foundation that I would like to reflect the current state.  I understand that in the beginning I can set the width with something like this:</p>
  
  <pre><code>render: function() {
      var spanPercent = (this.props.a - this.props.b)/this.props.a + '%';
      var spanStyle = {
          width: spanPercent
      };
      return (
          &lt;div className="progress"&gt;
              &lt;span className="meter" style={spanStyle}&gt;&lt;/span&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>
  
  <p>however, when the value of props changes due to a state change, the inline style doesn't update even though the props value changes.  Is there a best practice for doing this, such as using a callback, or placing the code somewhere else?  I would appreciate any help!</p>