Reactのフォーム値を動的に確認したい。

Question

やりたいこと

Formの値がバリデーションをクリアした場合に送信ボタンの色を変更する機能に関してリファクタリングしたい。

困っていること

認証に関するhooksを次のように書きました。(sendableがtrueで色が変わる。)
下記のコードでフォームの値を動的に確認できていいるのですが、これだとformが増える度にnowHomeを作成する必要があり、冗長になってしまうので
リファクタリングしたいと考えています。ご教授よろしくお願いします。
一応、formに関する他のライブラリは一旦頼らない方向性です。

import React from "react";
import { useState } from "react";

type AuthInputType = {
　name: string;
  password: string;
  email: string;
};

export const useAuth = () => {
  const [authInfo, setAuthInfo] = useState<AuthInputType>({} as AuthInputType);
  const [sendable, setEndable] = useState(false);

  const isEmailValidation = (password: string) => {
    var reg = /[\w\-._]+@[\w\-._]+.[A-Za-z]+/;
    if (reg.test(password)) {
      return true;
    } else {
      return false;
    }
  };

  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const nowEmail =
      e.target.name === "email" ? e.target.value : authInfo.email;
    const nowPassword =
      e.target.name === "password" ? e.target.value : authInfo.password;
    const nowName =
      e.target.name === "name" ? e.target.value : authInfo.name;

    if (nowPassword && nowName && isEmailValidation(nowEmail)) {
      setEndable(true);
    } else {
      setEndable(false);
    }
    setAuthInfo({ ...authInfo, [e.target.name]: e.target.value });
  };

  return { sendable, onChange };
};

Answer 1

authInfo全体を受け取って、値が送信可能かをチェックする関数を作る、というのはどうでしょうか？

// validateAuthInfoはuseAuthの外側に独立した関数として実装ができる
const sendable = validateAuthInfo(authInfo);
const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  setAuthInfo({ ...authInfo, [e.target.name]: e.target.value });
};