CODEWITHSUNDEEP
javascriptcssreactjs
Robdll
Robdll

Reputation: 6255

How to edit element width using react

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!

Upvotes: 7

Views: 53947

Answers (4)

manoj
manoj

Reputation: 1

You can assign the percentage value of the progress bar as the percentage width of the element with CSS through style attribute:

 <span className="fill" style={{width: this.state.value + '%'}}>

Upvotes: 0

Radovan Kuka
Radovan Kuka

Reputation: 2047

Try to add style={{width: this.state.progress + '%'}} to the div with progress class

Upvotes: 2

Mikkel
Mikkel

Reputation: 7777

Assuming that you are going to update progress with a call like this:

this.setState({ progress: 50})

Setting the state will trigger a re-render, which can control the width of your progress bar like this:

  <div className = "progress" style={{width: this.state.progress+"%"}}>

Upvotes: 0

bennygenel
bennygenel

Reputation: 24660

You can use inline style prop.

Example

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

Upvotes: 20

Related Questions