CODEWITHSUNDEEP
cssreactjsstylesstate
lost9123193
lost9123193

Reputation: 11030

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?

Upvotes: 7

Views: 23103

Answers (2)

Oleksandr T.
Oleksandr T.

Reputation: 77482

You can do it like this

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

Example

Upvotes: 23

Mike Tronic
Mike Tronic

Reputation: 560

yes its possible check below

class App extends React.Component {

  constructor(props){
    super(props)
    this.state = {
      width:30; //default
    };
  }


  render(){

//when state changes the width changes
const style = {
  width: this.state.width
}

  return(
    <div>
    //when button is clicked the style value of width increases
      <button onClick={() => this.setState({width + 1})}></button>
      <div className='progress-bar'
           role='progressbar'
           style={style}>
      </div>
    </div>
  );
}

:-)

Upvotes: 3

Related Questions