how to add or remove classes using ReactJS-CodePudding

   const ref = useRef(null)
  const handleClick = () => {
  if(ref.current.classList.contains('hidden')){
    ref.current.classList.remove('hidden')
  }else{
    ref.current.classList.add('hidden')
  }
 }

Uncaught TypeError: Cannot read properties of null (reading 'classList')

             <div className='px-4 cursor-pointer md:hidden' id='burger' onClick={handleClick()}>
          <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
            <path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
          </div>
          <ul className='text-sm mt-6 hidden md:block' id='menu' ref={ref}>

I am using tailwindcss in ReactJS

CodePudding user response：

In your jsx, it should be onClick={handleClick}. You need to pass the function reference without invoking it

CodePudding user response：

import './App.css';

export default function App() {
  const handleClick = event => {
    //