TypeError: can't access property "addEventListener", signUpButton is null (Converting Vanilla JS in React)

[kazooi]

Hello Friends!

could someone help me to figure out whats the issue with my code? I created a Login Form with a transformation which I like to trigger with Javascript. Everything works fine with vanilla JS but when I try to use this code in React (Next JS) then I got this error:

import { useState } from 'react';

export default function LoginForm() {
  // OPEN AND CLOSE LOGIN FORM

  const [login, setLogin] = useState(false);

  const toggleLogin = () => {
    setLogin(!login);
  };

  // LOGIN FORM ANIMATION/MOVEMENT

  if (typeof window === 'object') {
    const signUpButton = document.getElementById('signUp');
    const signInButton = document.getElementById('signIn');
    const loginFormContainer = document.getElementById('login-form_wrapper');

    signUpButton.addEventListener('click', () =>
      loginFormContainer.classList.add('right-panel-active')
    );

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

  return (
    <>
      <button className="btn-login" onClick={toggleLogin}>
        Login
      </button>

      {login && (
        <div className="login-form_container">
          <div className="login-popup">
            <div className="login-form_wrapper" id="login-form_wrapper">
              <div className="form-container sign-up-container">
                <form action="#">
                  <h1>Create Account</h1>
                  <p className="p-login-form">Start your journey with us!</p>
                  <input type="text" placeholder="Name" />
                  <input type="text" placeholder="Company" />
                  <input type="email" placeholder="Email" />
                  <input type="password" placeholder="Password" />
                  <input type="text" placeholder="Phone" />
                  <input type="text" placeholder="Country" />
                  <p className="p-login-form">
                    Once we have received your request, we will get in contact
                    with you soon.
                  </p>
                  <button className="btn-primary">Sign Up</button>
                </form>
              </div>
              <div className="form-container sign-in-container">
                <form action="#">
                  <h1>Welcome Back!</h1>
                  <p className="p-login-form">Login to your account</p>
                  <div className="input-container">
                    <input type="email" placeholder="Email" />
                    <input type="password" placeholder="Password" />
                  </div>
                  <a href="#" className="reset-password">
                    Forgot your password?
                  </a>
                  <button className="btn-primary">Login</button>
                </form>
              </div>
              <div className="overlay-container">
                <div className="overlay">
                  <div className="overlay-panel overlay-left">
                    <h1>Back to Login?</h1>
                    <p className="p-login-form-02">
                      Click here when you already have an account.
                    </p>
                    <button className="ghost" id="signIn">
                      Login
                    </button>
                  </div>
                  {/* OVERLAY RIGHT */}
                  <div className="overlay-panel overlay-right">
                    <button
                      className="btn-close-login-form"
                      onClick={toggleLogin}
                    >
                      CLOSE
                    </button>
                    <h1>Hello Friends!</h1>
                    <p className="p-login-form-02">
                      Enter your personal details and start your journey with
                      us.
                    </p>
                    <p>Let´s build something great!</p>
                    <button className="ghost" id="signUp">
                      Sign Up
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}
    </>
  );
}

Actually all I wanted to do is to convert Vanilla JS into a React (Next JS) App, but for whatever reason I got this:

TypeError: can't access property "addEventListener", signUpButton is null

But the SignUp/signIn ID is connected to the button. .

Can anyone see what I am doing wrong here??

Thanks a lot for help!

.
.
.

PS: If you need more information please let me know. I can also upload a repo if this is necessary to check whats wrong.

PPS: Marry Christmas to everyone!

[kevinSmith]

Well, first of all, that you are manipulating the DOM in a React app should be a big warning sign. You should be handling those click events with the components “onClick” prop, and manipulating class names should be done by having those conditional on some state variable that gets set by those callback functions.

In React, React handles the DOM. You don’t do it directly or it will confuse React.

[kazooi]

Oh I see… I need to handle these click events with the components “onClick” props and then I need to create a state which adds and removes the specific class.

I searched for some syntax examples and some still use getElementById, thats confusing. Here is what I have created so far, but I have some issues with the syntax:

const switchLoginForm = () => {
    const switchThis = document.getElementById('login-form_wrapper');
    if (switchThis !== null) {
      if (loginFormOpen) {
        switchThis.classList.add('right-panel-active');
        loginFormOpen = false;
      } else {
        switchThis.classList.remove('right-panel-active');
        loginFormOpen = true;
      }
    }
  };

<button className="ghost" id="signIn" onClick={switchLoginForm}>Sign In</button>

<button className="ghost" id="signUp" onClick={switchLoginForm}>Sign Up</button>
                   

I am not sure if I need two if statements and loginFormOpen is not defined, but I am not sure what to put inside the brakets "if ( ??? !== null)…

Can you please let me know if I am on the right way?

Thanks for any help!!

[kevinSmith]

@kazooi

const switchThis = document.getElementById('login-form_wrapper');

You’re still trying to access the DOM directly. Every time you do that Jordan Walke kills a puppy.

Here is an example of using React state to toggle class names in React.

[kazooi]

Oh really… I love puppies, never will do that again!

Thanks for your help!!