How to make an inactive button while the input field does not meet the conditions

[Rustam23]

I have a form with a transition to another page after authorization. I need the button to be inactive until the number of characters is not enough.

type User = {
  name: string;
  password: string;
};

function Login() {
  const adminUser: User = {
    name: "admin",
    password: "admin123",
  };

  const [user, setUser] = useState({ name: "" });
  const [error, setError] = useState("");
  const Login = (inputValue: { name: string; password: string }) => {
    console.log(inputValue);
    if (
      inputValue.name === adminUser.name &&
      inputValue.password === adminUser.password
    ) {
      setUser({
        name: inputValue.name,
      });
    } else {
      setError("Fill in the fields!");
    }
  };

  return (
          <div>
        {user.name !== "" ? (
          <Redirect to={"/Chat"} />
        ) : (
          <LoginForm Login={Login} error={error} />
        )}
      </div>
)

import React, { FormEvent, useState } from "react";
// import React, { FormEvent, useState, useEffect } from "react";

interface ILoginForm {
  Login: (inputValue: { name: string; password: string }) => void;
  error: string;
}

const MoleculesLoginForm: React.FC<ILoginForm> = ({ Login, error }) => {
  const [inputValue, setInputValue] = useState({ name: "", password: "" });

  // const [namedError, setNamedError] = useState("");
  // const [passwordError, setPasswordError] = useState("");
  // const [formValid, setFormValid] = useState(false);
  // useEffect(() => {
  //   if (namedError || passwordError) {
  //     setFormValid(false);
  //   } else {
  //     setFormValid(true);
  //   }
  // }, [namedError, passwordError]);
  // const nameHandler = (e) => {
  //   setInputValue(e.target.value);
  //   if (e.target.value.length < 3 || e.target.value.length > 20) {
  //     setNamedError("incorrect name");
  //   } else {
  //     setNamedError("");
  //   }
  // };
  // const passHandler = (e) => {
  //   setInputValue(e.target.value);
  //   if (e.target.value.length < 3 || e.target.value.length > 9) {
  //     setPasswordError("incorrect pass");
  //   } else {
  //     setPasswordError("");
  //   }
  // };

  const submitHandler = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    Login(inputValue);
  };

  return (
    <div>
      <form onSubmit={submitHandler}>
        <div >
          {error !== "" ? <div className="error">{error}</div> : ""}
          <div>
            <p>User name</p>
            <input
              type="text"
              name="name"
              id="name"
              placeholder="Input user name"
              // onChange={(e) => nameHandler(e)}
              onChange={(e) =>
                setInputValue({ ...inputValue, name: e.target.value })
              }
              value={inputValue.name}
            />
          </div>
          <div>
            <p>Password</p>
            <input
              type="password"
              name="password"
              id="password"
              placeholder="Input password"
              // onChange={(e) => passHandler(e)}
              onChange={(e) =>
                setInputValue({ ...inputValue, password: e.target.value })
              }
              value={inputValue.password}
            />
          </div>
          <button
            // disabled={!formValid}
            type="submit"
          >
            Log In
          </button>
        </div>
      </form>
    </div>
  );
};

[sober9075]

I hope this would be helpful

How to disable button in React.js

also consider the fact that you’re changing the state of an object see how that affects the rerender.
useReducer is usually preferable to useState when you have complex state logic that involves multiple sub-values or when the next state depends on the previous one. useReducer also lets you optimize performance for components that trigger deep updates because you can pass dispatch down instead of callbacks.

[Rustam23]

thanks. If I run into difficulties I will come back