lost9123193 lost9123193 - 2 years ago 77
CSS Question

Add a State property to an Inline Style in React

I have a react element that has an inline style like this: (Shortened version)

<div className='progress-bar'
style={{width: '30%'}}>

I want to replace the width with a property from my state, although I'm not quite sure how to do it.

I tried:

<div className='progress-bar'
style={{{width: this.state.percentage}}}>

Is this even possible?

Answer Source

You can do it like this

style={ { width: `${ this.state.percentage }%` } }


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download