proper way of adding/removing classes in React

Question

I'm a React newbie and have a question!

Im posting this because I haven't been able to find a clear answer on what the best method is for adding/ removing classes to HTML in React. I have created my first React app and came to the point where I wanted to start animating some of the elements of my app by adding/ removing classes when a certain action happens.

Here is what I have done:

I have passed the elements class that I want to animate through a state. The state is given an initial value like so:

getInitialState: function() {
    return {
       cartClasses:"order-wrap"
       }
}

Then I have passes down the state to a child component which receives the state and implements the cart classes like so:

<div className={this.props.cartClasses}>

In one of my functions I have the following if statement:

 newTotalClean != 0 ? this.setState({cartClasses:"order-wrap cart-out"}) : this.setState({cartClasses:"order-wrap"});

Basically it evaluates one of my variables called newTotalClean and if it doesn't equal 0 it updates the state of cartClasses to "order-wrap cart-out" thus adding an extra class that contains CSS animation effects.

Usually I would use jQuery Add/removeClass() but i'm trying to restrict myself from using that and do it in a more React way, not sure if storing classes in a state is the best method or not?

Thanks for your help!

helfi · Accepted Answer · 2016-09-15 00:27:43Z

2

this is what I usually do. I make a variable that holds the class names and put this variable inside my jsx. Something along the lines of:

magic: function() {
  var myClass = this.state.cartClasses;

  if (condition) {
    this.setState({ cartClasses: 'class1' });
  } else {
    this.setState({ cartClasses: 'class2' });
  }  

  return (
    <div className={myClass}>
      hello world
    </div>
  );
}

Hope this helps :)

answered Sep 15, 2016 at 0:27

helfi

1253 silver badges10 bronze badges

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

Comments

JFAP · Accepted Answer · 2016-09-14 23:00:14Z

1

I suggest you use ReactCSSTransitionGroup. Instead of setting the className, you set the transition name like the following:

<ReactCSSTransitionGroup 
    transitionName="example" 
    transitionEnterTimeout={500} 
    transitionLeaveTimeout={300}
>
    ... some code here ..
</ReactCSSTransitionGroup>

See this page to learn more about Animations in React.

answered Sep 14, 2016 at 23:00

JFAP

3,7371 gold badge27 silver badges25 bronze badges

1 Comment

user5780883 Over a year ago

this is probably the closest to being the standard 'React' way of doing it. Would you say my method is incorrect or an OK workaround?

Jhalaa Chinoy · Accepted Answer · 2016-09-15 09:05:22Z

0

There is a javascript utility called classnames which can be used to join multiple classnames.

This is a link to their github page This gives more clarity and I have found it more intuitive to understand. For example, your code could be written as

var cartClasses = classNames('order-wrap',{'cart-out':  newTotalClean!=0});

The above says that by default,there will be a class called order-wrap assigned and only if the condition is met,the other class is assigned.

edited Sep 15, 2016 at 9:05

answered Sep 15, 2016 at 9:00

Jhalaa Chinoy

5176 silver badges15 bronze badges

Collectives™ on Stack Overflow

proper way of adding/removing classes in React

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related