css React onclick 显示组件

Question

我正在学习 css 和 react 并且有点困惑当用户单击按钮 myButton 时如何显示：阻止组件。并在用户再次点击时隐藏组件。

我正在使用移动和桌面视图，并且希望按钮不在桌面视图中显示，它只会在移动视图中显示。

在移动视图中，一旦用户单击按钮切换组件需要显示。那就是我不知道如何通过 onclick 来切换 css to display:block 来显示整个组件。在桌面视图中切换显示。

这里是代码map.tsx

<div className={styles.controlsContainer}>
        <Toggle />
</div>
    <div className={styles.button_about}>
            <AboutPopup />
            <Button id=myButton
              type="primary"
              icon={<FilterOutlined />}
              className={styles.filterbutton} onClick== --- How to say to enable toggle css to block??
            ></Button>
          </div>

这是我的 map.module.scss 的样子

.toggle {
  width: 244px;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  box-sizing: border-box;
  border-radius: 4px;
  display: flex;
  align-items: center;
  float: left;
}
@media screen and (max-width: $mobileMax) {
  .toggle {
    display: none;
  }
}
.button {
  &_about {
    @include for-desktop {
      position: absolute;
      bottom: 2em;
      right: 2em;
    }
    @include for-mobile {
      position: absolute;
      top: 2em;
      z-index: 1;
      right: 2em;
      z-index: 1;
    }
  }
}

.filterbutton {
  width: 40px;
  height: 40px;
  left: calc(50% - 40px / 2);
  top: calc(50% - 40px / 2);
  background: $color-blue;
  border-radius: 100px;
  color: #83888c;
  @include for-desktop {
    display: none;
  }
  @include for-mobile {
    position: absolute;
    top: 4em;
    right: 2em;
  }
}

----- 更新 2 所以我做了这样的事情

const [isShow, setIsShow] = React.useState(true);
  const handleClick = () => {
    setIsShow((prev) => !prev);
    console.log(isShow);
  };
return
(
 <div className={styles.controlsContainer}>
        <Toggle
          className= {isShow ? {styles.toggle_show} : {styles.toggle_hide}} 
        />
)

但我在 styles.toggle_show 上遇到解析错误解析错误：',' expected.eslt

Answer 1

也许这会有所帮助

import React from "react";
import "./styles.css";

export default function App() {
  const [isShow, setIsShow] = React.useState(false);
  const handleClick = () => setIsShow((prev) => !prev);
  return (
    <>
      <div className={isShow ? "show" : "hide"}>my toggling component</div>
      <button onClick={handleClick}>toggle show</button>
    </>
  );
}

css:

.show {
  display: block;
}

.hide {
  display: none;
}