title: proper way of adding/removing classes in React
body: <p>I'm a React newbie and have a question!</p>
  
  <p>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. </p>
  
  <p>Here is what I have done:</p>
  
  <p>I have passed the elements class that I want to animate through a state. The state is given an initial value like so:</p>
  
  <pre><code>getInitialState: function() {
      return {
         cartClasses:"order-wrap"
         }
  }
  </code></pre>
  
  <p>Then I have passes down the state to a child component which receives the state and implements the cart classes like so:</p>
  
  <pre><code>&lt;div className={this.props.cartClasses}&gt;
  </code></pre>
  
  <p>In one of my functions I have the following if statement:</p>
  
  <pre><code> newTotalClean != 0 ? this.setState({cartClasses:"order-wrap cart-out"}) : this.setState({cartClasses:"order-wrap"});
  </code></pre>
  
  <p>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.</p>
  
  <p>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?</p>
  
  <p>Thanks for your help!</p>