useStateを用いて、要素の背景色をクリック後に変更する

// tsxファイル(tailwindCSSを使用)
// 不必要なコードを省略済

const categoryAll = {
  name: "全部",
  label: "all",
};

const [selectedCategory, setSelectedCategory] = useState("");
const handleCategoryClick = (category: SetStateAction<string>) => {
  setSelectedCategory(category);
};

return (
  <li
    key={categoryAll.name}
    onClick={() => handleCategoryClick(categoryAll.name)}
    className={`cursor-pointer rounded-3xl p-[8px_20px] font-light leading-[1.25] tracking-[0.02em] shadow-[0_0_10px_rgba(0,0,0,0.1)] transition duration-200 hover:opacity-80
    ${selectedCategory === categoryAll.name ? "bg-gray-500" : ""}
  `}
  ></li>;
);

下記のコードは、業務で書いた一部を抜粋したものである。
特定の要素がクリックされたら、条件が一致している場合にのみ背景色を変更する。

1. useStateを使用して、"selectedCategory"という変数を用意する。
   また、初期値は空文字にしている。
   もしデフォルトで特定の要素をクリック済にしたい場合は、括弧内にカテゴリー名を記述する。

2. 次に、"handleCategoryClick"関数を作成する。
   <li>要素がクリックされたら、関数内で"setSelectedCategory"を呼び出して"selectedCategory"変数を更新する。

3. <li>要素内でonClickイベントを設定し、クリックする度に"handleCategoryClick"関数を実行する。

4. useState内の変数を使用するために、"className"にテンプレートリテラルで条件式を記述する。