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 >
                    <div >
                        <div >
                            <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.

EDIT -------------------------

I don't know how to turn this piece of jQuery into React and am not sure how to start:

$(window).scroll(function() {
            if ($(document).scrollTop() > 50) {
                $('.nav').addClass('affix');
                console.log("OK");
            } else {
                $('.nav').removeClass('affix');
            }
        });

This is for the same codepen template as well, it basically adds a black background to the navbar when you start scrolling. How do I make it so that I can see if a user scrolls past a certain height, then trigger a function (the above jQuery)?

CodePudding user response：

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");
  }

CodePudding user response：

1- Go to the root directory of your react project and open terminal to install jQuery using the below-mentioned command.

npm install jquery --save

2- import jquery

import $ from 'jquery'

3- Now create a function and put your jquery code inside that function. For this tutorial purpose, I have created a lorem ipsum text and button and I will use jQuery CSS API to change the color of lorem ipsum text by clicking on that button, and call that function inside the componentDidMount lifecycle method. like this:

class Navbar extends React.Component {        
    jQuerycode = () => {
       // Jquery here $(...)...
      
        });
      }
      componentDidMount(){
        this.jQuerycode()
      }
  }