How to make Hamburger Icon menu function to work with single click in React.js?

Question

I have been following a coding tutorial of making responsive Navbar from Youtube in Html,CSS and JS.
While i really wanted to remake it again in react, the hamburger icon works flawlessly previously when i made it in plain Html, CSS and JS Click here to see the example. (Switch the browser in mobile view to see the Hamburger icon)

But when I copied all my code in react (as follows):

import React, { Component } from "react";
import "./style/navbar.css";
import { Link } from "react-router-dom";

class navbar extends Component {
  render() {
    const navslide = () => {
      const burger = document.querySelector(".burger");
      const nav = document.querySelector(".nav-links");
      const navLinks = document.querySelectorAll(".nav-links li");
      burger.addEventListener("click", () => {
        nav.classList.toggle("nav-active");

        navLinks.forEach((link, index) => {
          if (link.style.animation) {
            link.style.animation = "";
          } else {
            link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 +
              0.5}s`;
          }
        });

        burger.classList.toggle("toggle");
      });
    };

    return (
      <div>
        <nav>
          <div className="logo">
            <h3>College Facemash</h3>
          </div>
          <ul className="nav-links">
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/login">Login / Signup</Link>
            </li>
          </ul>
          <div className="burger" onClickCapture={navslide}>
            <div className="line1"></div>
            <div className="line2"></div>
            <div className="line3"></div>
          </div>
        </nav>
      </div>
    );
  }
}

export default navbar;

it worked well but not not functioning in single click. Instead it did required Double click to function.

Click here to see the demo.(Switch the browser in mobile view to see the Hamburger icon)

So, What changes should i made in order to make my code work flawlessly

Your help would be really valuable to me.
Thanks...

score 1 · Answer 1 · answered Jan 13 '20 at 14:38

Try like this:

class Navbar extends Component {
    const navslide = () => {
      const nav = document.querySelector(".nav-links");
      const navLinks = document.querySelectorAll(".nav-links li");
      nav.classList.toggle("nav-active");
      navLinks.forEach((link, index) => {
          if (link.style.animation) {
            link.style.animation = "";
          } else {
            link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;
          }
        });

        burger.classList.toggle("toggle");
      });
    };
  render() { 
    return (
      <div>
        <nav>
          <div className="logo">
            <h3>College Facemash</h3>
          </div>
          <ul className="nav-links">
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/login">Login / Signup</Link>
            </li>
          </ul>
          <div className="burger" onClick={() => navslide()}>
            <div className="line1"></div>
            <div className="line2"></div>
            <div className="line3"></div>
          </div>
        </nav>
      </div>
    );
  }
}

score 0 · Accepted Answer · answered Jan 13 '20 at 14:49

why calling burger.addEventListener("click") while your function will run on burger click! this is why it need 2 click to run!

import React, { Component } from "react";
    import "./style/navbar.css";
    import { Link } from "react-router-dom";

    class navbar extends Component {
      render() {
        const navslide = () => {
          const burger = document.querySelector(".burger");
          const nav = document.querySelector(".nav-links");
          const navLinks = document.querySelectorAll(".nav-links li");
            nav.classList.toggle("nav-active");

            navLinks.forEach((link, index) => {
              if (link.style.animation) {
                link.style.animation = "";
              } else {
                link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 +
                  0.5}s`;
              }
            });

            burger.classList.toggle("toggle");
        };

        return (
          <div>
            <nav>
              <div className="logo">
                <h3>College Facemash</h3>
              </div>
              <ul className="nav-links">
                <li>
                  <Link to="/">Home</Link>
                </li>
                <li>
                  <Link to="/about">About</Link>
                </li>
                <li>
                  <Link to="/login">Login / Signup</Link>
                </li>
              </ul>
              <div className="burger" onClick={navslide}>
                <div className="line1"></div>
                <div className="line2"></div>
                <div className="line3"></div>
              </div>
            </nav>
          </div>
        );
      }
    }

    export default navbar;

also i recommend adding state to your component and changing it when ham is clicked! and then you can change elements classes depending on this state.

How to make Hamburger Icon menu function to work with single click in React.js?

2 Answers2