Question 179874 in Javascript Question posted in
A very good W3school tutorial can be found here.

“What’s the problem when I add an event listener to my React app and everything disappears?”

i want to add a onclick event to my navbar button but when i add the eventistener everything disappears. here’s my code:

import React from "react";
import {Bars3Icon} from '@heroicons/react/24/solid'


const Navbar = () => {
    let btn = document.querySelector('icon');
    let menu = document.querySelector('menu1');
    
    btn.addEventListener('click' , () => {
        menu.classList.toggle('hidden');
    })
    return (
    <div className="bg-[#1f1e20]">
        <div>
           <button id="icon"><Bars3Icon className="text-white w-8 h-8 relative left-[320px] top-2" /></button>
            <ul id="menu1" className="grid text-white text-center gap-4 p-4  ">
                <a href=""><il>
                Home
                </il></a>
                <a href=""><il>
                About
            </il></a>
            <a href=""> <il>
                Contact
            </il></a>
            </ul>
        </div>
    </div>
    )
}



export default Navbar;

idk what am i missing i reviewed some source codes aswell.

Tags:

2

Answers


  1. 0

    You’re kind of going about this all wrong. You are not using React the way it is meant to be used, relying on attaching and removing properties via query selection. Try thinking about it the "React" way.

    If you want to toggle on a class, create a state variable that saves the value between re-renders.

    const [hidden, setHidden] = useState(false);

    Then you should change your button component to use the onClick props.

    <button onClick={() => setHidden(!hidden) }>
    <Bars3Icon ... /> 
</button>

    Finally, toggle your class using a ternary operator;

    <Bars3Icon className={`text-white w-8 h-8 relative left-[320px] top-2 ${hidden ? 'hidden' : ''}`} />
    Login or Signup to reply.
  2. 0

    Looks like you’re probably missing the class/id in the querySelector.

    Make sure you add the correct class/method for icon and menu in the querySelector.

    Also, try not to manipulate DOM elements directly in react.
    You could use React’s state and event handling to achieve the desired behavior.

    import React, { useState } from "react";
import { Bars3Icon } from '@heroicons/react/24/solid';

const Navbar = () => {
  const [menuVisible, setMenuVisible] = useState(false);

  const toggleMenu = () => {
    setMenuVisible(!menuVisible);
  };

  return (
    <div className="bg-[#1f1e20]">
      <div>
        <button id="icon" onClick={toggleMenu}>
          <Bars3Icon className="text-white w-8 h-8 relative left-[320px] top-2" />
        </button>
        <ul id="menu1" className={`grid text-white text-center gap-4 p-4 ${menuVisible ? '' : 'hidden'}`}>
          <li>
            <a href="">Home</a>
          </li>
          <li>
            <a href="">About</a>
          </li>
          <li>
            <a href="">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  );
};

export default Navbar;

    This should give the desired result

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search