Unsure how to turn this jQuery code to React

0 votes

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.

Aug 4 in Web Development by gaurav
• 18,960 points
27 views

1 answer to this question.

0 votes

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");
  }
answered Aug 5 by rajatha
• 7,440 points

Related Questions In Web Development

0 votes
0 answers

How to add jQuery code into HTML Page

$(".icon-bg").click(function () { $(".btn").toggleClass("active"); ...READ MORE

Jun 29 in Web Development by gaurav
• 18,960 points
38 views
0 votes
1 answer

is there any way to download truffle? how to solve this error

Hello @ aishah , It seems likely that this is ...READ MORE

answered May 25, 2020 in Web Development by Niroj
• 82,780 points
586 views
0 votes
1 answer

How to download a file by jQuery.Ajax?

Hello @kartik, You don't need to do this ...READ MORE

answered Sep 18, 2020 in Web Development by Niroj
• 82,780 points
5,726 views
0 votes
1 answer

From php returning JSON to JavaScript

Hii @kartik, You can use Simple JSON for PHP. ...READ MORE

answered Jun 5, 2020 in Java-Script by Niroj
• 82,780 points
381 views
0 votes
1 answer

What is jQuery?

Hey, jQuery is a fast and concise JavaScript ...READ MORE

answered Feb 14, 2020 in JQuery by kartik
• 37,510 points
324 views
0 votes
1 answer

Uncaught TypeError: Cannot read property 'msie' of undefined - jQuery tools

Hello, Use the following script tag in your ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,780 points
9,313 views
0 votes
1 answer

Uncaught Error: Bootstrap's JavaScript requires jQuery

Hello @kartik, You have provided wrong order for ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,780 points
16,508 views
0 votes
1 answer

How to change the jquery mobile flip switch state from code

I've examined the page you posted and ...READ MORE

answered Aug 1 in Web Development by rajatha
• 7,440 points
36 views
0 votes
1 answer
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP