How to add multiple classes to a ReactJS Component?

I use ES6 template literals. For example:

const error = this.state.valid ? '' : 'error'const classes = `form-control round-lg ${error}`

And then just render it:

<input className={classes} />

One-liner version:

<input className={`form-control round-lg ${this.state.valid ? '' : 'error'}`} />

I use classnames when there is a fair amount of logic required for deciding the classes to (not) use. An overly simple example:

...    var liClasses = classNames({      'main-class': true,      'activeClass': self.state.focused === index    });    return (<li className={liClasses}>{data.name}</li>);...

That said, if you don't want to include a dependency then there are better answers below.

Just use JavaScript.

<li className={[activeClass, data.klass, "main-class"].join(' ')} />

If you want to add classes based keys and values in an object you can use the following:

function classNames(classes) {  return Object.entries(classes)    .filter(([key, value]) => value)    .map(([key, value]) => key)    .join(' ');}const classes = {  'maybeClass': true,  'otherClass': true,  'probablyNotClass': false,};const myClassNames = classNames(classes);// Output: "maybeClass otherClass"<li className={myClassNames} />

Or even simpler:

const isEnabled = true;const isChecked = false;<li className={[isEnabled && 'enabled', isChecked && 'checked']  .filter(e => !!e)  .join(' ')} />// Output:// <li className={'enabled'} />