title: How to edit element width using react
body: <p>I'd like to edit my progress bar width by using react props.
  In my code I have a certain value in the component state (state.progress).
  How can I use it to properly stretch the progress bar,</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class Hello extends React.Component {
    render() {
      return &lt;div className = "bar" &gt;
        &lt;div className = "progress" &gt;
  
        &lt;/div&gt; 
      &lt;/div&gt;;
    }
  }
  
  ReactDOM.render( &lt;
    Hello name = "World" / &gt; ,
    document.getElementById('container')
  );</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.bar {
    width: 100%;
    border: 1px solid black;
    border-radius: 15px;
    height: 15px;
  }
  
  .progress {
    width: 5%;
    background: green;
    border-radius: 15px;
    height: 15px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"&gt;&lt;/script&gt;
  &lt;div id="container"&gt;
    &lt;!-- This element's contents will be replaced with your component. --&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks folks!</p>