How to hide the sidebar when clicking on the corresponding button?

Question

css

I want to hide/show the filter on click on a button which is on the outer edge of this sidebar. I'd like to try doing this using the useState hook, but since I'm still a beginner, I'm doing it quite clumsily. Please give direction.

const TaskRegionView = () => {
        const [condition, setCondition] = useState(false);
        ...
         <Button type="link">
               <LeftOutlined onClick={() => setCondition(true)} />
         </Button>
          <Filter
                className={styles['filter']}
           />

Answer 1

You can simply find this button element, find the block with the filter, and by clicking on the button, set the toggle('active') method to the block with the filter, and set display: block in css for active, and by default the filter will have display none, and by clicking on the button the state of the block will change