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              lt div class  ui-progressbar-value ui-widget-header ui-corner-left  style  width  80     gt           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      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                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

User · Answer

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                            lt div className  ui-progressbar-value ui-widget-header ui-corner-left  style   width   percentage    gt              I created the percentage variable outside in the render function

[javascript] How to change ReactJS styles dynamically?

Examples related to javascript

Examples related to css

Examples related to reactjs