Why code not work

[waelabednebi3]

import React  from 'react'
import '../App.css'
import {Link} from 'react-router-dom'
import Logo from '../img/logo.png'
import {FaBars , FaSearch ,FaShoppingCart , FaUserCircle} from 'react-icons/fa'



function NavBar() {
  const navbar = document.querySelector('.navbar');
  
  document.querySelector('#menu-btn').onClick= () =>{
      navbar.classList.toggle('active');
      searchForm.classList.remove('active');
      shoppingCart.classList.remove('active');
      loginForm.classList.remove('active');
  }
  
  let searchForm = document.querySelector('.search-form');

  document.querySelector('#search-btn').onClick = () =>{
      searchForm.classList.toggle('active');
      shoppingCart.classList.remove('active');
      loginForm.classList.remove('active');
      navbar.classList.remove('active');
  }
  
  let shoppingCart = document.querySelector('.shopping-cart');
  
  document.querySelector('#cart-btn').onClick = () =>{
      shoppingCart.classList.toggle('active');
      searchForm.classList.remove('active');
      loginForm.classList.remove('active');
      navbar.classList.remove('active');
  }
  
  let loginForm = document.querySelector('.login-form');
  
  document.querySelector('#login-btn').onClick = () =>{
      loginForm.classList.toggle('active');
      searchForm.classList.remove('active');
      shoppingCart.classList.remove('active');
      navbar.classList.remove('active');
  }
  
  
  
  
  
  return (
    <div>
      <header>
        <Link to={'/'}>
          <img src={Logo} alt='logo' />
          {/* <p>wael</p> */}
        </Link>
        <nav className='navbar'>
          <Link to={'/'} className='active'>Home</Link>
          <Link to={'/about'}>About</Link>
          <Link to={'/menu'}>Menu</Link>
          <Link to={'/team'}>Team</Link>
          <Link to={'/reservation'}>Reservation</Link>
          <Link to={'/blog'}>Blog</Link>
          

          <div className='signin'>
          <Link to={'/signin'} >Sign in</Link>
          </div>
        </nav>
       
        <div className="icons">
        <div className="fas fa-bars" id="menu-btns"><FaBars  className="icons"/></div>
        <div className="fas fa-search" id="search-btns"><FaSearch className="fas fa-search" /></div>
        <div className="fas fa-shopping-cart" id="cart-btns"><FaShoppingCart className="fas fa-shopping-cart" id="cart-btns"/></div>
        <div className="fas fa-user" id="login-btns"><FaUserCircle className="fas fa-user" id="login-btns"/></div>
    </div>

    <form action="" className="search-form">
        <input type="search" id="search-box" placeholder="search here..."/>
        <label for="search-box" className="fas fa-search"></label>
    </form>

      </header>


     
    </div>
  )
}

export default NavBar

[DanCouper]

None of the stuff you’re trying to manually select using DOM methods exists when you try to select things, so it won’t work. The stuff that looks like HTML is not, it’s just a way of writing JS functions, and JS functions don’t have HTML class or ID attributes.

You have a function, NavBar, that returns some other functions which eventually build a big tree of things that represent a UI. Then you hand that to a function called render provided by a library called react-dom, which takes that and generates HTML.

To be able to use DOM methods, you basically need to tell the function to do the above, then run again once the last step occurred, because that’s the only point in time the things you’re trying to select might actually exist and be selectable. This is what useEffect can do, it is a hook for keeping data in sync, and allows you to run side effects.

However

You are entirely missing the point of React by attempting to use the DOM methods: you already have direct access to the JSX which renders the HTML there is absolutely no need to hugely complicate things by then trying so manually manipulate the HTML generated by those functions. If you want to add an “active” class to some button, just do that –

<button
  className={theConditionThatDeterminesIfItIsActive && "active"}
  onClick={() => doThing()}
>
  My Button
</button>