How do you handle dynamic class names in React?

1
2
3
4
5
6
7
8

function Badge({ tone, active }) {
  const cls = `badge badge--${tone}${active ? ' badge--active' : ''}`;
  return <span className={cls}>New</span>;
}

// or with an array, which reads better with several conditions
const cls = ['badge', `badge--${tone}`, active && 'badge--active']
  .filter(Boolean).join(' ');