Return to Answer

<div className={['foo', condition && 'bar'].filter(Boolean).join(' ')} /> 

.filter(Boolean) removes "falsey" values from the array. Since class names must be strings, anything other than that would not be included in the new filtered array.

console.log( ['foo', true && 'bar'].filter(Boolean).join(' ') ) console.log( ['foo', false && 'bar'].filter(Boolean).join(' ') )

Above written as a function:

const cx = (...list) => list.filter(Boolean).join(' ') // usage: <div className={cx('foo', condition && 'bar')} /> 

var cx = (...list) => list.filter(Boolean).join(' ') console.log( cx('foo', 1 && 'bar', 1 && 'baz') ) console.log( cx('foo', 0 && 'bar', 1 && 'baz') ) console.log( cx('foo', 0 && 'bar', 0 && 'baz') )

<div className={['foo', condition && 'bar'].filter(Boolean).join(' ')} /> 

.filter(Boolean) removes "falsey" values from the array. Since class names must be strings, anything other than that would not be included in the new filtered array.

console.log( ['foo', true && 'bar'].filter(Boolean).join(' ') ) console.log( ['foo', false && 'bar'].filter(Boolean).join(' ') )

Above written as a function:

const cx = (...list) => list.filter(Boolean).join(' ') // usage: <div className={cx('foo', condition && 'bar')} /> 

var cx = (...list) => list.filter(Boolean).join(' ') console.log( cx('foo', 1 && 'bar', 1 && 'baz') ) console.log( cx('foo', 0 && 'bar', 1 && 'baz') ) console.log( cx('foo', 0 && 'bar', 0 && 'baz') )

<div className={['foo', condition && 'bar'].filter(Boolean).join(' ')} /> 

.filter(Boolean) removes "falsey" values from the array. Since class names must be strings, anything other than that would not be included in the new filtered array.

Example:

console.log( ['foo', true && 'bar'].filter(Boolean).join(' ')  ) console.log( ['foo', false && 'bar'].filter(Boolean).join(' ') )

As a helper function:

const cx = (...list) => list.filter(Boolean).join(' ') // usage: <div className={cx('foo', condition && 'bar')} /> 

var cx = (...list) => list.filter(Boolean).join(' ') console.log( cx('foo', 1 && 'bar', 1 && 'baz') ) console.log( cx('foo', 0 && 'bar', 1 && 'baz') ) console.log( cx('foo', 0 && 'bar', 0 && 'baz') )

<div className={['foo', condition && 'bar'].filter(Boolean).join(' ')} /> 

.filter(Boolean) removes "falsey" values from the array. Since class names must be strings, anything other than that would not be included in the new filtered array.

console.log( ['foo', true  && 'bar'].filter(Boolean).join(' ') ) console.log( ['foo', false && 'bar'].filter(Boolean).join(' ') )

Above written as a function:

const cx = (...list) => list.filter(Boolean).join(' ') // usage: <div className={cx('foo', condition && 'bar')} /> 

var cx = (...list) => list.filter(Boolean).join(' ') console.log( cx('foo', 1 && 'bar', 1 && 'baz') ) console.log( cx('foo', 0 && 'bar', 1 && 'baz') ) console.log( cx('foo', 0 && 'bar', 0 && 'baz') )

<div className={['foo', condition && 'bar'].filter(Boolean).join(' ')} /> 

.filter(Boolean) removes "falsey" values from the array. Since class names must be strings, anything other than that would not be included in the new filtered array.

Example:

console.log( ['foo', true && 'bar'].filter(Boolean).join(' ') ) console.log( ['foo', false && 'bar'].filter(Boolean).join(' ') )

As a helper function:

const cx = (...list) => list.filter(Boolean).join(' ') <div className={cx('foo', condition && 'bar')} /> 

var cx = (...list) => list.filter(Boolean).join(' ') console.log( cx('foo', 1 && 'bar', 1 && 'baz') ) console.log( cx('foo', 0 && 'bar', 1 && 'baz') ) console.log( cx('foo', 0 && 'bar', 0 && 'baz') )

<div className={['foo', condition && 'bar'].filter(Boolean).join(' ')} /> 

.filter(Boolean) removes "falsey" values from the array. Since class names must be strings, anything other than that would not be included in the new filtered array.

Example:

console.log( ['foo', true && 'bar'].filter(Boolean).join(' ') ) console.log( ['foo', false && 'bar'].filter(Boolean).join(' ') )

As a helper function:

const cx = (...list) => list.filter(Boolean).join(' ') // usage: <div className={cx('foo', condition && 'bar')} /> 

var cx = (...list) => list.filter(Boolean).join(' ') console.log( cx('foo', 1 && 'bar', 1 && 'baz') ) console.log( cx('foo', 0 && 'bar', 1 && 'baz') ) console.log( cx('foo', 0 && 'bar', 0 && 'baz') )