title: React - add or remove class on click
body: <p>I want to add the &quot;active&quot; class on the hamburger div when its clicked so my sidebar to be visible  when its clicked on smaller devices and remove the class &quot;active&quot; it from the  close div. I understand that I have to use usestate but I'm not sure how because my code keeps breaking.</p>
  <p>my code</p>
  <pre><code>import StyledLink from './styled'
  import React, { useState } from 'react';
  
  const SideBar = () =&gt;{
  const [active, setActive] = useState(false)
  
        return (
          &lt;&gt;
  
            &lt;div className={active ? &quot;.wrapper&quot; : &quot;.wrapper.active&quot;}&gt;
                &lt;div className=&quot;sidebar&quot;&gt;
                  &lt;div className=&quot;bg-shadow&quot;&gt;&lt;/div&gt;
                      &lt;div className=&quot;sidebar_inner&quot;&gt;
                      &lt;div className=&quot;close&quot;&gt;
                      &lt;i className=&quot;fas fa-times&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;
                      &lt;/div&gt;
                      &lt;div className=&quot;profile_info&quot;&gt;
                         &lt;div className=&quot;profile_img&quot;&gt;
                           &lt;img src=&quot;&quot; alt=&quot;profile_pic&quot;/&gt;
                            &lt;/div&gt;
                           &lt;div className=&quot;profile_data&quot;&gt;
                          &lt;div className=&quot;name&quot;&gt;Tina Makri &lt;/div&gt;
                          &lt;div className=&quot;role&quot;&gt;Full-Stack Developer &lt;/div&gt;
  
                       &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;ul className=&quot;sidebar_menu&quot;&gt;
                      &lt;StyledLink to=&quot;/&quot;&gt;
                      &lt;div className=&quot;title&quot;&gt;Home &lt;/div&gt;
                      &lt;/StyledLink&gt;
  
                      &lt;StyledLink to=&quot;/about &quot; &gt;
                      &lt;div className=&quot;title&quot;&gt;About&lt;/div&gt;
                      &lt;/StyledLink&gt;
  
                      &lt;StyledLink to=&quot;/project&quot;&gt;
                      &lt;div className=&quot;title&quot;&gt;Projects &lt;/div&gt;
                      &lt;/StyledLink&gt;
  
                      &lt;StyledLink to=&quot;/contact&quot;&gt;
                      &lt;div className=&quot;title&quot;&gt;Contact &lt;/div&gt;
                      &lt;/StyledLink&gt;
                      &lt;/ul&gt;
                        &lt;/div&gt;
                &lt;/div&gt;
                &lt;div className=&quot;main_container&quot;&gt;
                &lt;div className=&quot;top_navbar&quot;&gt;
                  &lt;div className=&quot;hamburger&quot; &gt;
                      &lt;div className=&quot;hamburger__inner &quot; &gt;
  
                    &lt;button id=&quot;menuToggler&quot; onClick={() =&gt; setActive(!active)}&gt;  &lt;i className=&quot;fas fa-bars&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;&lt;/button&gt;
  
                      &lt;/div&gt;
  
                  &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
          &lt;/&gt;
        );
      }
  
  
  
  export default SideBar;
  </code></pre>
  <p>and my css</p>
  <pre><code>*{
    list-style: none;
    text-decoration: none !important;
  }
  .wrapper{
    display:flex;
    width: 100%;
  }
  .wrapper .sidebar{
    position: relative;
  }
  .wrapper .sidebar .sidebar_inner{
    width :250px;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    background-color:red;
    z-index: 999;
    transition: all 0.3s ease;
  }
  .main_container{
  
    margin-left:250px;
    width: calc(100%-250px);
      transition: all 0.3s ease;
  }
  .wrapper .sidebar_inner .profile_info{
    padding: 30px 50px;
    text-align: center;
  }
  
  .wrapper .sidebar_inner .profile_info .profile_img{
    width: 125px;
    margin:0 auto 15px;
  }
  .wrapper .sidebar_inner .profile_info .profile_img img{
    width: 100%;
    display: block;
  }
  .wrapper .sidebar_inner .profile_info .profile_data .name{
    font-size: 22px;
    font-weight: 700;
    color: #fff;
  }
  .wrapper .sidebar_inner .profile_info .profile_data .role{
    font-weight: 300;
    color:#88a3d0;
    margin-bottom: 15px;
  }
  
  
  .wrapper .main_container .top_navbar{
    width: calc(100% - 250px);
    height: 60px;
    background-color:  #923baa;
    display: flex;
    justify-content: space-between;
    padding: 15px 25px;
    position: fixed;
    top:0;
    left:250px;
    transition: all 0.3s ease;
  }
  .wrapper .main_container .top_navbar .hamburger{
    width: 30px;
    height: 30px;
    position: relative;
    display: none;
  
  }
  .wrapper .main_container .top_navbar .hamburger .fa-bars{
    color:white !important;
    font-size:25px;
    cursor: pointer;
    position: relative;
    top:50%;
    left:50%;
    transform: translate(-50%,9%);
  }
  .wrapper .main_container .top_navbar .hamburger .fa-bars:hover{
    opacity:0.5;
  }
  
  .wrapper .close{
    position: absolute;
    top:5px;
    right:15px;
    font-size:25px;
    color: #fff;
    cursor: pointer;
  display: none;
  }
  .wrapper.active{
    right: 100%;
  }
  .wrapper .close:hover{
    opacity: 0.5;
  }
  
  @media screen and (max-width:800px){
    .wrapper .sidebar .sidebar_inner{
      left:-100%;
    }
    .wrapper .main_container,
    .wrapper .main_container .top_navbar{
      width: 100%;
      margin-left:0;
    }
    .wrapper .main_container .top_navbar{
      left:0;
    }
    .wrapper .main_container .top_navbar .hamburger,
    .wrapper .close {
      display: block;
    }
    .wrapper.active .sidebar .sidebar__inner{
      left:0;
    }
  
  }
  
  </code></pre>