title: How to change ReactJS styles dynamically?
body: <p>I was trying to run ReactJS inside my twitter bootstrap web app. I have some issues using styles.</p>
  
  <p>Having this div:</p>
  
  <pre><code>   ...
     &lt;div class="ui-progressbar-value ui-widget-header ui-corner-left" style="width: 80%;"/&gt;
     ...
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>  var Task = React.createClass({
    render: function() {
    return (
    &lt;li&gt;
      &lt;a href="#"&gt;
        &lt;span className="header"&gt;
          &lt;span className="title"&gt;{this.props.type}&lt;/span&gt;
          &lt;span className="percent"&gt;{this.props.children}%&lt;/span&gt;
        &lt;/span&gt;
  
        &lt;div className="taskProgress progressSlim progressBlue" &gt;
          &lt;div className="ui-progressbar-value ui-widget-header ui-corner-left" 
         **style="width"+{this.props.value} +"%;" /&gt;**
        &lt;/div&gt;
      &lt;/a&gt;
     &lt;/li&gt;
    );
   }
  });
  </code></pre>
  
  <p>I read some documentation about the <a href="http://facebook.github.io/react/tips/inline-styles.html">inline sytles</a>, but the example is very light. </p>
  
  <p>Thanks for your help.</p>
  
  <h2>Edit:</h2>
  
  <p>By using:</p>
  
  <pre><code>    style={{width : this.props.children}}
  </code></pre>
  
  <p>it works fine, but was just wondering how to force it as % instead of px.</p>