CODEWITHSUNDEEP
cssreactjs
Andus
Andus

Reputation: 1731

Reactjs and SCSS - how to write height: selfheight x 2

I want to double the height of the div every time it is clicked.

I am thinking to apply a additional CSS class to a div when ever I click a button. The CSS concept will be like:

#divToBeDoubled {
    height: 100px;

    &.doubleHeight{
        height: selfHeight*2
    }
}

How can I achieve this by using Reactjs and SCSS?

Upvotes: 0

Views: 128

Answers (2)

Anshul Bansal
Anshul Bansal

Reputation: 1893

If using sass. You can use this, and toggle class in JSX onclick event.

$height: 100px;
.normal {
    height: $height;
}
.double {
    height: $height * 2;
}

Upvotes: 0

Jayffe
Jayffe

Reputation: 1279

I think if you want to change a css value with the component state, you need to move the property you want to change in you component or use JSS...

to move the property in the render, you can do this :

class MyComponent extends React.Component{

  state = {
    divHeight : 100
  }

  doubleSize = ()=>{
    this.setState({ divHeight : this.state.divHeight * 2 })
  }

  render() {

    const style = {
      height: this.state.divHeight
    };

    return (
      <div style={style} onClick={this.doubleSize}>Content</div>
    );
  }

}

Upvotes: 1

Related Questions