To conditionally apply a class based on state, you can use the following syntax:

<div className={ this.state.condition ? 'yourClass' : '' }>
  text
</div>

If you need to toggle classes based on a state variable, you can do it like this:

<div className={ this.state.toggle ? 'active' : 'inactive' }>
  text
</div>

The React documentation provides guidance on manipulating class names and recommends using the classnames NPM package.

The documentation for this package is extremely helpful.

A snippet directly from the package's README: Usage section

classNames('foo', 'bar');                 // => 'foo bar'
classNames('foo', { bar: true });         // => 'foo bar'
classNames({ 'foo-bar': true });          // => 'foo-bar'
classNames({ 'foo-bar': false });         // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: false, bar: true });    // => 'bar'

// lots of arguments of various types
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); 
// => 'foo bar baz quux'

// other falsy values are just ignored
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); 
// => 'bar 1'

Most responses assume the topic revolves around conditionally toggling CSS classes using a ternary if statement, but it becomes more complicated when you want to include class names as options. Using multiple ternary ifs with empty false expressions can be quite verbose. Resorting to an NPM package might be excessive, while creating a function could also be seen as overkill by some.

My approach is different.

const classNames = [
  "className1",
  condition1 && "className2",
  condition2 && "className3",
  condition3 && "className4",
].filter(e => e).join(" ");

Update as of June 2021

I've noticed that this response still receives sporadic upvotes. To provide a more current example, here's a revised snippet utilizing a concise arrow function:

const cls = (...classes) => classes.filter(Boolean).join(' ');

<div className={cls('mandatoryClass', condition && 'optionalClass')} />

If you find yourself needing to add a conditional class to an existing one, here's a helpful tip

<span className={'fa ' + (this.state.dropdownActive ? 'fa-angle-up' : 'fa-angle-down')}></span>

In this scenario, I am demonstrating how to display an arrow icon for a dropdown based on the dropdown's state. The class fa must remain constant to apply the font-family to the span, with only the need to alternate between fa-angle-up and fa-angle-down.

Here's the same example using template literals

<span className={`fa ${this.state.dropdownActive ? 'fa-angle-up' : 'fa-angle-down'}`}></span>

For an easy way to manage CSS class names in your React components, consider using the Classnames library created by Jed Watson. You can find more information on this library at https://github.com/JedWatson/classnames

With the classNames function provided by this library, you can pass a string or object as arguments. If a key's value is falsy, it will not be included in the final output.

var classNames = require('classnames');

var Button = React.createClass({
  // ...
  render () {
    var btnClass = classNames({
      'btn': true,
      'btn-pressed': false,
      'btn-over': true
    });
    // The output will be: btnClass = "btn btn-over"
    return <button className={btnClass}>{this.props.label}</button>;
  }
});

If you have any questions after reviewing the documentation, feel free to reach out!

Cheers

The solution provided by another author in the comment above worked perfectly for my situation.

<div className={ this.state.end ? 'hidden' : 'shown' }>text</div>

Additionally, you can add more classes by simply separating them with a space.

Personally, I believe the solutions provided by the classnames library are the most accurate. However, if you prefer not to add another dependency, you can create your own simple implementation that functions similarly to jQuery:

function getClassBuilder () {
    return {
        array: [],
        add: function (className) {
            if (this.array.indexOf(className) < 0) {
                this.array.push(className);
            }
        },
        remove: function (className) {
            var index = this.array.indexOf(className);
            if (index > -1) {
                this.array.splice(index, 1);
            }
        },
        toString: function () {
            return this.array.join(' ');
        }
    }
}

Then, when you need to utilize it:

var builder = getClassBuilder();
builder.add('class1');
builder.add('class2');
if (condition) { builder.remove('class1') };

<a href="#" className={builder.toString()}>Button</a>

Conditional Styling with Class Names

<div className={"wrapper " + (this.props.active === true ? 'active' : 'inactive')}>

Multiple Conditions for Dynamic Styling

<div className={"box " + (this.props.condition === true ? 'show ' : 'hide ') + (this.props.secondCondition === true ? 'visible' : 'hidden')}>

Make sure to leave space between conditional classes and static classes at the end

This small package (around 220 bytes) has been a game-changer for me when it comes to reducing boilerplate code: Check out clsx on npm

With just a few lines of code, you can achieve the same result:

import clsx from 'clsx';

<div className={clsx('my-class', <some dynamic optional classes>)}>
or
<div className={clsx('class1', true && 'class2', 'class3')}>
//=> 'class1 class2 class3'