How to edit element width using react

Question

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,

class Hello extends React.Component {
  render() {
    return <div className = "bar" >
      <div className = "progress" >

      </div> 
    </div>;
  }
}

ReactDOM.render( <
  Hello name = "World" / > ,
  document.getElementById('container')
);

.bar {
  width: 100%;
  border: 1px solid black;
  border-radius: 15px;
  height: 15px;
}

.progress {
  width: 5%;
  background: green;
  border-radius: 15px;
  height: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

Thanks folks!

Answer 1

You can use inline style prop.

Example

  render() {
    return <div className="bar" >
      <div className="progress" style={{width: this.state.progress}} >
        // ...
      </div> 
    </div>;
  }