Dynamic RJS

import { useState } from "react";

const LoginDynamic = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const validate = () => {
    // Error object
    const errors = {};

    // Email validation regular expression
    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/i;

    // CHECKING THE VALIDITY OF THE EMAIL AND THE PASSWORD
    if (!email) errors.email = "Email is required"; //When email is empty
    else if (!regex.test(email)) errors.email = "Please enter valid email"; //When email is invalid
    if (!password) errors.password = "Password is required"; //Password is required

    // returning true if no errors are there, if there is any error returning false in that case
    return Object.keys(errors).length === 0;
  };

  const submitHandler = (e) => {
    e.preventDefault();
  };

  return (
    <form onSubmit={submitHandler}>
      <input
        type="text"
        placeholder="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <input
        type="text"
        placeholder="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button type="submit" disabled={!validate()}>
        Save
      </button>
    </form>
  );
};

export default LoginDynamic;