How to convert Vanilla JS to React JS

April 5, 2023

I am new to react and I have this vanilla JS but in react it is not working

Could you help me how can I work this in react

document.querySelector(".img__btn").addEventListener("click", function () {
    document.querySelector(".cont.").classList.toggle("s--signup");
   });

I tried this as vanilla JS should work in react but its not its showing AddEventListner error

>Solution :

A direct translation of this into React is a component like this

import { useState } from "react";

const App = () => {
  const [isSignupVisible, setIsSignupVisible] = useState(false); // false is default value
  
  return (
    <>
      <button onClick={() => setIsSignupVisible((prev) => !prev)}>Toggle isSignupVisible</button>
      <div class={isSignupVisible ? "s--signup" : ""}>
        <p>Idk what you want here</p>
      </div>
    </>
  );
};

With React, you should very rarely, if ever, manually add event listeners, use query selectors, or toggle classes the way you do.