Reactでボタンを押したときにクラスを付与したい(クラスを複数持てるようにしたい)

Question

実現したいこと

ボタンを押したときにクラスを付与したい(クラスを複数持てるようにしたい)

例)
<button>color</button>ボタンを押すとpタグを以下のように変更し

<p class="color">This is a paragraph</p>

<button>font-weight</button>ボタンを押すとpタグを以下のように変更する

<p class="font-weight>This is a paragraph</p>

<button>color</button>と<button>font-weight</button>を押した際は以下のように変更する

<p class="color font-weight>This is a paragraph</p>

行ったこと

①<button>color</button>を押した際にpタグにcolorクラスを付与した
②<button>font-weight</button>を押した際にpタグにfont-weigthクラスを付与した。

躓いてしまっていること

pタグにcolorクラスを付与した後にfont-weightクラスをつけるようにonClick関数を新たに作成をしましたが
onClick関数が上書きされてしまい、意図したことがうまく実現できなくて困っております。

作成したコード

import "./styles.css";
import { useState } from "react";

export default function App() {
  const [className, setClassName] = useState("");
  const [className01, setClassName01] = useState("");

//colorクラスを付与
  const handleClick = () => {
    setClassName("color");
  };

//font-weightクラスを付与
  const handleClick02 = () => {
    setClassName01("font-weight");
  };

  return (
    <div className="App">
      <button onClick={handleClick}>color</button>
      <button onClick={handleClick02}>font-weight</button>

      <p className={(className, className01)}>This is a paragraph</p>//className01関数しか効かない
    </div>
  );
}

どなたかお時間のある方がいらっしゃいましたらご回答のほどよろしくお願いいたします。

Answer 1

半角スペースで区切ってはいかがですか？

<p className={`${className} ${className01}`}>This is a paragraph</p>

カンマ区切りには classnames っていうライブラリが必要みたいですね

Comments

[Gheoxj]

ありがとうございます！
無事できました！