I want to add the "active" class on the hamburger div when its clicked so my sidebar to be visible when its clicked on smaller devices and remove the class "active" it from the close div. I understand that I have to use usestate but I'm not sure how because my code keeps breaking.

my code

import StyledLink from './styled'
import React, { useState } from 'react';

const SideBar = () =>{
const [active, setActive] = useState(false)

      return (
        <>

          <div className={active ? ".wrapper" : ".wrapper.active"}>
              <div className="sidebar">
                <div className="bg-shadow"></div>
                    <div className="sidebar_inner">
                    <div className="close">
                    <i className="fas fa-times" aria-hidden="true"></i>
                    </div>
                    <div className="profile_info">
                       <div className="profile_img">
                         <img src="" alt="profile_pic"/>
                          </div>
                         <div className="profile_data">
                        <div className="name">Tina Makri </div>
                        <div className="role">Full-Stack Developer </div>

                     </div>
                    </div>
                    <ul className="sidebar_menu">
                    <StyledLink to="/">
                    <div className="title">Home </div>
                    </StyledLink>

                    <StyledLink to="/about " >
                    <div className="title">About</div>
                    </StyledLink>

                    <StyledLink to="/project">
                    <div className="title">Projects </div>
                    </StyledLink>

                    <StyledLink to="/contact">
                    <div className="title">Contact </div>
                    </StyledLink>
                    </ul>
                      </div>
              </div>
              <div className="main_container">
              <div className="top_navbar">
                <div className="hamburger" >
                    <div className="hamburger__inner " >

                  <button id="menuToggler" onClick={() => setActive(!active)}>  <i className="fas fa-bars" aria-hidden="true"></i></button>

                    </div>

                </div>
                </div>
              </div>
          </div>
        </>
      );
    }



export default SideBar;

and my css

*{
  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;
  }

}

CodePudding user response：

<div className={active ? ".wrapper" : ".wrapper.active"}>

should instead be

<div className={active ? "wrapper" : "wrapper active"}>

or better yet

<div className={'wrapper '   (active ? '' : 'active'}>

(Although just to clarify, this would add the "active" class when active is false! Did you mean to swap the inline-if?)

CodePudding user response：

The syntax you're using here:

.wrapper

.wrapper.active

are selector strings - which, for example, would be used inside CSS rules, or by document.querySelector or document.querySelectorAll or jQuery. A dot before a word indicates that you're selecting a class with that particular word.

.foo {
  color: red
}

will make the following element red:

<div class="foo">text</div>

The class attribute in the HTML should not have any periods in it - the period is only for selector strings, to indicate that you're selecting a class. This:

<div className={active ? ".wrapper" : ".wrapper.active"}>

needs to be fixed to

<div className={active ? "wrapper active" : "wrapper"}>