React.js: how to make inline styles automatically update progress bar on state change

Question

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:

render: function() {
    var spanPercent = (this.props.a - this.props.b)/this.props.a + '%';
    var spanStyle = {
        width: spanPercent
    };
    return (
        <div className="progress">
            <span className="meter" style={spanStyle}></span>
        </div>
    );
}

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!

Answer 1

One solution is to put a key of the percentage on the element you want to update. That way when react checks to see what in the DOM has changed it sees that the key has changed and thus will rebuild the DOM for the element.

See example below:

render: function() {
   var spanPercent = (this.props.a - this.props.b)/this.props.a + '%';
   var spanStyle = {
          width: spanPercent
       };
   return (
      <div className="progress">
        <span key={spanPercent} className="meter" style={spanStyle}></span>
      </div>
);

}