useState

./app/page.tsx

"use client";

import { useState } from "react";
import { IconLayoutGrid, IconListDetails } from "@tabler/icons-react";

export default function FilteredItems() {
  const [opened, setOpened] = useState(false);

  return (
    <>
      <button
        onClick={() => setOpened(false)}
        className={`${opened ? "text-black" : "text-blue-600"}`}>
        <IconLayoutGrid size={24} />
      </button>

      <button
        onClick={() => setOpened(true)}
        className={`${opened ? "text-blue-600" : "text-black"}`}>
        <IconListDetails size={24} />
      </button>

      {* True/False *}
      {opened ? "Open" : "Closed"}

      {* View *}
      {opened && <div>Open</div>}

      {* Переключает сам себя *}
      <button
        onClick={() => setOpened((c) => !c)}
        className={`${opened ? "text-black" : "text-blue-600"}`}>
        {opened ? "Open" : "Closed"}
      </button>
      {opened ? "Open" : "Closed"}
    </>
  );
}