How to toggle CSS styles with Toggle method in React

by

This is Header component with React-Bootstrap. I created a menu icon with pure CSS but I want to change the icon function onClick but I’m getting the error – TypeError: Cannot read property 'toggle' of undefined . It’s there any way I’m getting it wrongly? Kindly check. Thanks.

Also, it’s there a way, I can handle this with React Hooks method instead?

Thanks.

import styles from './Landing.module.css';
import './Landing.module.css';;

const openMenu = (open) => {
    open.classList.toggle('change');
};

 <Nav className="ml-auto">
  <div className={styles.allMenus}>
    <div className="menuIcon" onClick={openMenu}>
       <div className={styles.bar1}></div>
         <div className={styles.bar2}></div>
           <div className={styles.bar3}></div>
         </div>
      </div>
 </Nav>

My CSS – It has the change styles

div[class="menuIcon"] {
    background-color: #ffffff;
    padding: 13px;
    margin-right: 46px;
    float: right;
    cursor: pointer;
}

.bar1, .bar2, .bar3 {
    width: 32px;
    height: 3px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
    transform: rotate(-45deg) translate(-9px, 6px) ;
}
  
.change .bar2 {
    opacity: 0;
}
  
.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
    transform: rotate(45deg) translate(-8px, -8px) ;
}

19 thoughts on “How to toggle CSS styles with Toggle method in React”

  2. 512807 319058Oh my goodness! an incredible post dude. Thank you Nonetheless Im experiencing challenge with ur rss . Don know why Unable to subscribe to it. Is there anyone acquiring comparable rss drawback? Anybody who knows kindly respond. Thnkx 967226

    Reply

  3. 645171 776723Sorry for the huge review, but Im truly loving the new Zune, and hope this, as nicely as the exceptional reviews some other individuals have written, will help you decide if it is the right choice for you. 826200

    Reply

Leave a Comment