How to change ReactJS styles dynamically?

Question

I was trying to run ReactJS inside my twitter bootstrap web app. I have some issues using styles.

Having this div:

   ...    <div class="ui-progressbar-value ui-widget-header ui-corner-left" style="width: 80%;"/>    ... 

I'm writing some dynamic progress bar, and would like to make that 80% change (look at ** underneath). So this is my code writing in JSX:

  var Task = React.createClass({   render: function() {   return (   <li>     <a href="#">       <span className="header">         <span className="title">{this.props.type}</span>         <span className="percent">{this.props.children}%</span>       </span>        <div className="taskProgress progressSlim progressBlue" >         <div className="ui-progressbar-value ui-widget-header ui-corner-left"         **style="width"+{this.props.value} +"%;" />**       </div>     </a>    </li>   );  } }); 

I read some documentation about the inline sytles, but the example is very light.

Thanks for your help.

Edit:

By using:

    style={{width : this.props.children}} 

it works fine, but was just wondering how to force it as % instead of px.

Answer 1

Ok, finally found the solution.

Probably due to lack of experience with ReactJS and web development...

    var Task = React.createClass({     render: function() {       var percentage = this.props.children + '%';       ....         <div className="ui-progressbar-value ui-widget-header ui-corner-left" style={{width : percentage}}/>       ... 

I created the percentage variable outside in the render function.