Unsure how to turn this jQuery code to React

Question

I'm trying to incorporate this HTML/CSS/JS codepen template into my react website. I'm trying to turn this piece of jQuery code to react:

$('.navTrigger').click(function () {
            $(this).toggleClass('active');
            console.log("Clicked menu");
            $("#mainListDiv").toggleClass("show_list");
            $("#mainListDiv").fadeIn();
        
        });

Here's what I tried so far:

import React, { Component } from 'react';
import './Navbar1.css';

class Navbar extends Component {

    state = { navbarActive: false }

    navbarClick = () => {
        this.setState({ navbarActive: !this.state.navbarActive })
    };

    render() {
        return (
            <div className="header">
                <nav class="nav">
                    <div class="container">
                        <div class="logo">
                            <a href="#">Your Logo</a>
                        </div>
                        <div id="mainListDiv" className={this.state.navbarActive ? "show_list" : "main_list"}>
                            <ul className="navlinks">
                                <li><a href="#">About</a></li>
                                <li><a href="#">Portfolio</a></li>
                                <li><a href="#">Services</a></li>
                                <li><a href="#">Contact</a></li>
                            </ul>
                        </div>
                        <span className="navTrigger" onClick={this.navbarClick}>
                            <i></i>
                            <i></i>
                            <i></i>
                        </span>
                    </div>
                </nav>
            </div>
        );
    }
}

export default Navbar;

I am using the exact same CSS as the one on the codepen. I am unsure why it is not working (when hamburger navbar icon is clicked, it doesn't turn into an X and doesn't display a dropdown of the navbar items) and would appreciate some assistance.

Answer 1

You can initialize a state for navTrigger whic tell us whether it active or not as:

  const [isActive, setIsActive] = useState(false);

CODESANDBOX LINK

then you can make a ref for main_list

  const mainListDivRef = useRef(null);

You can add animation as per your requirement

then on click of hamburger icon you can perform operation as:

function onClickNavTrigger() {
    setIsActive((a) => !a);
    const mainListDivEl = mainListDivRef.current;
    mainListDivEl.classList.toggle("show_list");
  }

If you need to know more about React, Its recommended to join React Certification Course today.

Also read: How To Use jQuery with React.js Properly