this is my react java script where i want to insert the normal js code.
I have tried by using the {} brackets but that won’t run.
import './App.css';
function App() {
return (
<>
<div className="container"></div><div className="box">
<div className="wrapper">
<div className="form-wrapper sign-in">
<form action="">
<h2 className="he">Login</h2>
<div className="input-group">
<input className="ip1" type="text" required/>
<label for="">Username</label>
<i></i>
</div>
<div className="input-group">
<input type="password" required/>
<label for="">Password</label>
<i></i>
</div>
<button type="submit">Login</button>
<div className="signUp-link">
<p className="p1">Don't have an account? <a href="#" className="signUpBtn-link">Sign Up</a></p>
</div>
</form>
</div>
<div className="form-wrapper sign-up">
<form action="">
<h2 className="he2">Sign Up</h2>
<div className="input-group">
<input type="text" required/>
<label for="">Username</label>
<i></i>
</div>
<div className="input-group">
<input type="text" required/>
<label for="">Email</label>
<i></i>
<button type="submit">Sign Up</button>
<div className="signUp-link">
<p>Already have an account? <a href="#" className="signInBtn-link">Sign In</a></p>
</div>
</form>
</div>
</div>
</div></>
);
}
export default App;
This is the code that i wanto to merge.
I Want to merge the following code in the above code. I have a normal javaScript code but i don’t know how to write it in the React
const signInBtnLink = document.querySelector('.signInBtn-link');
const signUpBtnLink = document.querySelector('.signUpBtn-link');
const wrapper = document.querySelector('.wrapper');
signUpBtnLink.addEventListener('click', () => {
wrapper.classList.toggle('active');
});
signInBtnLink.addEventListener('click', () => {
wrapper.classList.toggle('active');
});