title: How do I add a conditional class in React without removing other classes?
body: <p>I want to add a class name to an element conditionally based on the truthiness of a state object, while maintaining the classes applied via a plugin on initial render.</p>
  
  <p><strong>Example that doesn't work:</strong></p>
  
  <pre><code>import React from 'react';
  import classnames from 'classnames';
  
  export default class CoolThing extends React.Component{
    constructor(props) {
      super(props);
    }
  
    componentDidMount() {
      // This plugin sets classes to the this.refs.root DOM element when it initializes 
      $(this.refs.root).jqueryPluginIHaveToUseThatSetsClassesAndDoesStuff();
    }
  
    handleClick = () =&gt; {
      this.setState({
        active: true
      })
    }
  
    render() {
      const classNames = classnames({
        active: this.state.active
      });
  
      return (
        &lt;div ref="root" className={ classnames } onClick={ this.handleClick }&gt;&lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p><strong>Same as above, but with this render also fails:</strong></p>
  
  <pre><code>render() {
    return (
      &lt;div ref="root" className={ this.state.active ? "CoolThing active" : "CoolThing" } onClick={ this.handleClick }&gt;&lt;/div&gt;
    )
  }
  </code></pre>
  
  <p>The desired result would have the "CoolThing" class always on this example's div tag in addition to whatever classes the <code>jqueryPluginIHaveToUseThatSetsClassesAndDoesStuff</code> applied. THEN, depending upon a user action, the <code>active</code> class would also be applied and not overwrite any of the previously applied classes.</p>
  
  <p><strong>I would like to avoid:</strong></p>
  
  <ul>
  <li>using jQuery's addClass via the <code>this.refs.root</code> reference</li>
  <li>adding a nested div that takes the <code>active</code> class or similar ... having themarkup structure remain intact is fairly important</li>
  </ul>