how to add and remove classes in css “ClassName” and React?

Question

I'm learning React and one of the things that I can't adapt is how to remove and add css classes, for example in the following component

import React from 'react';
import "../../styles/signInAndSignUp.css";
import login from "../../assets/img/log.svg";
import register from "../../assets/img/register.svg"

export const LoginScreen = () => {



    return (
        <>
        <div className="container-login">
      <div className="forms-container">
        <div className="signin-signup">
          <form action="!#" className="sign-in-form">
            <h2 className="title">Sign in</h2>
            <div className="input-field">
              <i className="fas fa-user"></i>
              <input type="text" placeholder="Username" />
            </div>
            <div className="input-field">
              <i className="fas fa-lock"></i>
              <input type="password" placeholder="Password" />
            </div>
            <input type="submit" value="Login" className="btn solid" />
            <p className="social-text">Or Sign in with social platforms</p>
            <div className="social-media">
              <a href="!#" className="social-icon">
                <i className="fab fa-facebook-f"></i>
              </a>
              <a href="!#" className="social-icon">
                <i className="fab fa-twitter"></i>
              </a>
              <a href="!#" className="social-icon">
                <i className="fab fa-google"></i>
              </a>
              <a href="!#" className="social-icon">
                <i className="fab fa-linkedin-in"></i>
              </a>
            </div>
          </form>
          <form action="!#" className="sign-up-form">
            <h2 className="title">Sign up</h2>
            <div className="input-field">
              <i className="fas fa-user"></i>
              <input type="text" placeholder="Username" />
            </div>
            <div className="input-field">
              <i className="fas fa-envelope"></i>
              <input type="email" placeholder="Email" />
            </div>
            <div className="input-field">
              <i className="fas fa-lock"></i>
              <input type="password" placeholder="Password" />
            </div>
            <input type="submit" className="btn" value="Sign up" />
            <p className="social-text">Or Sign up with social platforms</p>
            <div className="social-media">
              <a href="!#" className="social-icon">
                <i className="fab fa-facebook-f"></i>
              </a>
              <a href="!#" className="social-icon">
                <i className="fab fa-twitter"></i>
              </a>
              <a href="!#" className="social-icon">
                <i className="fab fa-google"></i>
              </a>
              <a href="!#" className="social-icon">
                <i className="fab fa-linkedin-in"></i>
              </a>
            </div>
          </form>
        </div>
      </div>

      <div className="panels-container">
        <div className="panel left-panel">
          <div className="content">
            <h3>New here ?</h3>
            <p>
              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Debitis,
              ex ratione. Aliquid!
            </p>
            <button className="btn transparent" id="sign-up-btn">
              Sign up
            </button>
          </div>
          <img src={login} className="image" alt="" />
        </div>
        <div className="panel right-panel">
          <div className="content">
            <h3>One of us ?</h3>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum
              laboriosam ad deleniti.
            </p>
            <button className="btn transparent" id="sign-in-btn">
              Sign in
            </button>
          </div>
          <img src={register} className="image" alt="" />
        </div>
      </div>
    </div>
    </>
    )
}

normally with pure javaScript I would do it like this

const sign_in_btn = document.querySelector("#sign-in-btn");
const sign_up_btn = document.querySelector("#sign-up-btn");
const container = document.querySelector(".container");

sign_up_btn.addEventListener("click", () => {
  container.classList.add("sign-up-mode");
});

sign_in_btn.addEventListener("click", () => {
  container.classList.remove("sign-up-mode");
});

What these classes do is show the sign in or the sing up depending on the button that the user has pressed

In advance thanks to whoever can help me with this

Answer 1

As Charlietfl mentioned, the vanilla js code you showed us wouldn't work properly as they would cancel each other out.

For your react problem: I first suggest you to start w/ understanding state, as Robin mentioned. If you had some sort of state, let's say two states:

const [addedClass, setAddedClass] = useState(false);
const [class, setClass] = useState('container');

Now, you have a boolean here to work with an onClick event to use as a conditional to add the class 'container'. something like:

const handleClick = () => {
 setAddedClass(prev => !prev)
}

so, if you had a div and you wanted to add the container className, you can use state to conditionally add it to the div, like so:

const [addedClass, setAddedClass] = useState(false);
const [className, setClassName] = useState('container');
  
  const handleClick = () => {
    setAddedClass(prev => !prev)
  }
  
  // console.log(addedClass) to see if the state is changing
  
  return (
    <div className={addedClass ? className : null}>
      <button onClick={handleClick}>Toggle Class name</button>
    </div>
  )
}

Each time you click the button, it'll run the handleClick function to change the addedClass state to opposite of what it was (true -> false, vice versa). With the ternary inside the className, the div will be added the className from the class state, which I called here 'container', based on the addedClass state. I think this is the fundamentals of using state in a react application. You can go a long way with just using the useState hook. Play around and learn more about hooks from their docs!