lost9123193 lost9123193 - 5 months ago 9
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'
role='progressbar'
style={{width: '30%'}}>
</div>


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'
role='progressbar'
style={{{width: this.state.percentage}}}>
</div>


Is this even possible?

Answer

You can do it like this

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

Example

Comments