Changing CSS onClick in reactjs

Question

I'm changing(updating) css of a css class when i click on a certain div like follows.

JS part

constructor() {
        super();

        this.state = {
            transform: 'rotateY(0deg)',
        };

        this.trait_select = this.trait_select.bind(this);

    }


    trait_select = (e) => {

        this.setState({

            transform: 'rotateY(180deg)'


        })

    }

html part

<div className="trait_box polaroid" onClick={this.trait_select}>
    <div className="main_trait_card" style={{transform: this.state.transform}}>
    </div>
</div>

Now this piece of code work fine. But i want to change the css into transform: 'rotateY(0deg)' if the user clicks on trait_select again. How can i do that?

Hieu Pham · Accepted Answer · 2017-03-21 04:22:23Z

1

We just change a little like:

trait_select = (e) => {
  const newTransform = this.state.transform == 'rotateY(180deg)' ? 'rotateY(0deg)' : 'rotateY(180deg)';
  this.setState({
    transform: newTransform
  })
}

It will toggle the value when trail is selected!

But I'd like to store transform enabled/disabled instead. So it would be:

constructor

this.state = { rotated: false };

trait_select

this.setState({ rotated: !this.state.rotated });

html part

<div className="trait_box polaroid" onClick={this.trait_select}>
    <div className="main_trait_card" style={{transform: this.state.rotated ? 'rotateY(180deg)' : 'none' }}/>
</div>

answered Mar 21, 2017 at 4:22

Hieu Pham

6,6922 gold badges33 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

CraZyDroiD Over a year ago

and 1 more thing. i have several divs with the same css classes used. When i used your solution every div starts to rotate. Is there anyway to apply the css only to the div that has been clicked?

Hieu Pham Over a year ago

You can extract that kind of div to a Component to store its rotate status

Collectives™ on Stack Overflow

Changing CSS onClick in reactjs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related