[Solved]-how to toggle between two css classes with react-Reactjs

in this case you could use useref:

const [active, setactive] = usestate(false)
const moderef = useref();

const handletoggle = () => {
     moderef.current.classlist.toggle("dark")
}

return (
    <button ref={moderef} classname="mode-switch" title="switch theme" onclick={handletoggle}>
          <svg classname="moon" fill="none" stroke="currentcolor" strokelinecap="round" strokelinejoin="round" strokewidth="2" width="24" height="24" viewbox="0 0 24 24">
            <defs></defs>
            <path d="m21 12.79a9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
          </svg>
    </button>
)