React JSX className に変数と固定値を混ぜて使いたい

ReactのJSXでクラス名を付ける時に変数と固定値な文字列を一緒に使いたいとき

コレはうまくいかない

  return (
    <button className="btn btn-${btnState}">BUTTON</button>
  );

文字列結合する

function Button() {
  const [btnState, setBtmState] = useState('primary');
  return (
    <button className={'btn btn-' + btnState}>BUTTON</button>
  );
}

テンプレート構文 (ES2015)を使う

function Button() {
  const [btnState, setBtmState] = useState('primary');
  return (
    <button className={`btn btn-${btnState}`}>BUTTON</button>
  );
}

変数で複数のクラスにするとき

.error とか変数があれば複数のクラス名になるような時、ただ結合しただけだと変数が空の時、HTMLのクラス属性の最後に空白ができて少し気持ち悪いです。
これを解決するには単純に trim() すればOKです。

テンプレート構文 (ES2015)を使う

function Button() {
  const [btnState, setBtmState] = useState('');
  return (
    <button className={`btn ${btnState}`.trim()}>BUTTON</button>
  );
}

配列結合 `join()`を使う

function Button() {
  const [btnState, setBtmState] = useState('');
  return (
    <button className={['btn', btnState].join(' ').trim()}>BUTTON</button>
  );
}