css React onclick show component - css

Question

I am learning css and react and a bit confused how to display:block for a component when a user clicks a button myButton. And to hide the component when the user clicks it again.
I am using mobile and desktop views and want the button to not show in desktop view, it will only show in Mobile view.
In Mobile view once the user clicks the button toggle component needs to show. That is where I dont know how onclick I can say for Toggle css to display:block to show entire component. Toggle shows in desktop view.
Here is code 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>
Here is how my map.module.scss looks like
.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;
}
}
----- Update 2
So I did something like this
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}}
/>
)
But I am getting a parsing error on styles.toggle_show Parsing error: ',' expected.eslt

Answer 1

maybe this could help
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;
}