CODEWITHSUNDEEP
reactjs
Thinker
Thinker

Reputation: 5356

React change style on function call

I have a component like following:

toggleRegistration() {

    this.setState({
        ...this.state,
        showFullSizedImage: true,
        showRegistration: !this.state.showRegistration,
    })

}    
...
<div className="div-one">
    <If condition={!this.state.showRegistration && !this.state.showLogin}>

        {/* Main registration button */}
        <div className="register-button">
            <Button
                backgroundColor="red"
                value="Get Started"
                minWidth={220}
                minHeight={50}
                fontSize={24}
                borderRadius={60}
                onClick={() => this.toggleRegistration()}>
            </Button>
        </div>
    </If>
</div>

Corresponding css:

.div-one {

  background: url("../../../assets/images/manhattan-min.png") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

  position: absolute;
  width: 100%;
  min-height: 500px;
  min-height: 100vh;

}

I want to reduce the width of div-one to 50% when user clicks the button i.e. toggleRegistration() method.

How should I do it?

Upvotes: 1

Views: 13635

Answers (3)

Cristian mar&#237;n
Cristian mar&#237;n

Reputation: 329

...component
  style={{ "left": `${styleHelper().left}`, "width": `${styleHelper().width}` }}
....

function styleHelper() {
  var left = 0;
  var width = 0;

  width = '50%'
  left = '50px'

  return { left: left, width: width }
}

Upvotes: 0

Rob M.
Rob M.

Reputation: 36511

I suggest using the classnames package and adding an additional css rule:

.div-one {
  background: url("../../../assets/images/manhattan-min.png") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

  position: absolute;
  width: 100%;
  min-height: 500px;
  min-height: 100vh;
}

.div-one.half-width {
  width: 50%;
}

Then in your script tag you conditionally add the half-width class based on whatever state is relevant:

import classNames from 'classnames';
...
<div className={classNames("div-one", { "half-width": this.state.showRegistration })>
    <If condition={!this.state.showRegistration && !this.state.showLogin}>

        {/* Main registration button */}
        <div className="register-button">
            <Button
                backgroundColor="red"
                value="Get Started"
                minWidth={220}
                minHeight={50}
                fontSize={24}
                borderRadius={60}
                onClick={() => this.toggleRegistration()}>
            </Button>
        </div>
    </If>
</div>

Upvotes: 2

FuzzyTree
FuzzyTree

Reputation: 32392

You can add a conditional style attribute to your div

<div className='div-one' style={{width: this.state.showRegistration ? '50%' : '100%'}}>

Upvotes: 4

Related Questions