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!

Something like style={{width: this.state.progress }}

spirift
– spirift

2017-10-24 10:27:41 +00:00
Commented Oct 24, 2017 at 10:27 — spirift
– spirift, Commented Oct 24, 2017 at 10:27

bennygenel · Accepted Answer · 2017-10-24 10:27:40Z

20

You can use inline style prop.

Example

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

answered Oct 24, 2017 at 10:27

bennygenel

24.8k7 gold badges68 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Robdll Over a year ago

yeah, i thought about it but it looks awfully ugly and seems like coding in the 90'. Isn't there any other way?

Radovan Kuka · Accepted Answer · 2017-10-24 10:45:18Z

2

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

edited Oct 24, 2017 at 10:45

answered Oct 24, 2017 at 10:30

Radovan Kuka

2,0471 gold badge18 silver badges20 bronze badges

Comments

Mikkel · Accepted Answer · 2017-10-24 10:31:51Z

0

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+"%"}}>

answered Oct 24, 2017 at 10:31

Mikkel

7,7773 gold badges20 silver badges32 bronze badges

5 Comments

Robdll Over a year ago

It sounds like that's the common way to do it. I was hoping react had some cleaner way to do that instead than using some 90' technique <,< thanks anyway

Robdll Over a year ago

it took 15 years to separate js / html and Css, and I'm bamboozled by the fact that now these 3 things are sticked together again, even if I understand that "it's all related to a single component"

Mikkel Over a year ago

Yeah, the world is circular. Keeping everything in separate files just means you spend time flicking between files (although that is still a necessity). At least things are all in one place now. The dream of separating concerns just wasn't that simple, so it's come back together. The programming world is borked :)

Robdll Over a year ago

concern separation just moved from the language to the component. React still separate concern, but it does it horizontally instead than vertically. qph.ec.quoracdn.net/main-qimg-301fe369321c4502756e965d4ae91620

DanyAlejandro Over a year ago

The more sugar you add to the framework, the less control you have over stuff like when does "width=10%" transform to "style=width:50%" and the more convoluted the rendering pipeline becomes. That kind of stuff hurts when you're doing something more complex than the helloworld tutorial.

j3ff · Accepted Answer · 2020-04-04 23:23:54Z

0

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 + '%'}}>

edited Apr 4, 2020 at 23:23

j3ff

6,2098 gold badges46 silver badges56 bronze badges

answered Apr 4, 2020 at 11:56

manoj

11 bronze badge

Collectives™ on Stack Overflow

How to edit element width using react

4 Answers 4

1 Comment

Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related