React page rendering blank with event listener functions

Having an issue with my code, causing the page to render blank. New to react so any help would be appreciated. I’ve scoured SO to try and find an answer but haven’t found anything that seems to work. I’m aware the syntax for react is incorrect in the functions causing the issue, just looking for some help! Thank you in advance.

Code:

import React, { Fragment, useContext, useState, useRef, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { AlertBoxContext } from '../contexts/alertbox-context';
import { AuthContext } from '../contexts/auth-context';

import '../scss/pages/NewSignup.scss'


function SignInPage() {
    const { SignUp } = useContext(AuthContext);
    const { showAlertBox } = useContext(AlertBoxContext);


    


    //following 10 lines cause the issue

    const signUpButton = document.getElementById('signUp');
    const signInButton = document.getElementById('signIn');
    const loginContainer = document.getElementById('loginContainer');


    signUpButton.addEventListener('click', () => {
        loginContainer.classList.add("right-panel-active");
    });

    signInButton.addEventListener('click', () => {
        loginContainer.classList.remove("right-panel-active");
    });


    
    return (

        <div className='pageBackground'>
            <div className="loginContainer" id="loginContainer">
                <div className="regForm-container sign-up-container">
                    <form className='regForm' action="/">
                        <h1 className='formHeader'>Create Account</h1>
                        <input type="text" placeholder="Name" />
                        <input type="email" placeholder="Email" />
                        <input type="password" placeholder="Password" />
                        <button className='formBtn'>Sign Up</button>
                    </form>
                </div>
                <div className="regForm-container sign-in-container">
                    <form className='regForm' action="/">
                        <h1 className='formHeader'>Log in</h1>
                        <input type="email" placeholder="Email" />
                        <input type="password" placeholder="Password" />
                        <h5 className='forgotPass' href="/">Forgot your password?</h5>
                        <button className='formBtn'>Log In</button>
                    </form>
                </div>
                <div className="overlay-container">
                    <div className="overlay">
                        <div className="overlay-panel overlay-left">
                            <h1 className='formHeader'>Welcome Back!</h1>
                            <h5>Log in and to get your deals closed faster</h5>
                            <button className="ghost" id="signIn">Sign In</button>
                        </div>
                        <div className="overlay-panel overlay-right">
                            <h1 className='formHeader'>Hey There!</h1>
                            <h5 className='regP'>Signing up with us is simple and takes less than a minute</h5>
                            <button className="ghost" id="signUp">Sign Up</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default SignInPage;

Answer

Forget these kind of usages with React. I mean there might be cases where you’ll have to register special events or selecting DOM elements (which I can recommend useRef hook.) but you don’t need to do that here.

Instead use useState hook for managing the state for your panel.

const [overlayActive, setOverlayActive] = useState(false);


return (
        <div className='pageBackground'>
            <div className={`loginContainer ${overlayActive ? right-panel-active : ''}`}>
                <div className="regForm-container sign-up-container">
                    <form className='regForm' action="/">
                        <h1 className='formHeader'>Create Account</h1>
                        <input type="text" placeholder="Name" />
                        <input type="email" placeholder="Email" />
                        <input type="password" placeholder="Password" />
                        <button className='formBtn'>Sign Up</button>
                    </form>
                </div>
                <div className="regForm-container sign-in-container">
                    <form className='regForm' action="/">
                        <h1 className='formHeader'>Log in</h1>
                        <input type="email" placeholder="Email" />
                        <input type="password" placeholder="Password" />
                        <h5 className='forgotPass' href="/">Forgot your password?</h5>
                        <button className='formBtn'>Log In</button>
                    </form>
                </div>
                <div className="overlay-container">
                    <div className="overlay">
                        <div className="overlay-panel overlay-left">
                            <h1 className='formHeader'>Welcome Back!</h1>
                            <h5>Log in and to get your deals closed faster</h5>
                            <button className="ghost" onClick={() => setOverlayActive(false)}>Sign In</button>
                        </div>
                        <div className="overlay-panel overlay-right">
                            <h1 className='formHeader'>Hey There!</h1>
                            <h5 className='regP'>Signing up with us is simple and takes less than a minute</h5>
                            <button className="ghost" onClick={() => setOverlayActive(true)}>Sign Up</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )

Don’t forget to do the same for your form submits. Do not use event listeners. Add onSubmit attribute to your forms and change your button types to submit.

Also right now, you are selecting the dom elements and adding event listeners (overriding actually) with each render, each time your component’s state or props change. You can overcome this with useEffect normally but as I said use the way I mentioned above.

Using custom event listeners also has more disadvantages.

You have to remove each event listener in cleanup.
You are not safe with cross-browser. React uses SyntheticEvent for events which is a cross-browser wrapper around the browser’s native event (https://reactjs.org/docs/events.html)
Performance. You are not having the performance boost that SyntheticEvent provides you (event pooling) (not anymore after React v17).

Advertisement

Answer