reactjs typescript useForm - a simple custom hook to manage form in react

gistfile1.txt

Credit to
https://medium.com/javascript-in-plain-english/react-controlled-forms-with-hooks-538762aab935

import React, { ChangeEvent, FormEvent, useReducer } from "react";

const useForm = (initialState: any) => {
  const reducer = (
    state: typeof initialState,
    payload: { field: string; value: string }
  ) => {
    return {
      ...state,
      [payload.field]: payload.value,
    };
  };
  const [state, dispatch] = useReducer(reducer, initialState);
  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    dispatch({ field: e.target.name, value: e.target.value });
  };
  return {
    state,
    bind: {
      onChange: handleChange,
    },
  };
};

const Auth: React.FC = () => {
  const initialState = {
    email: "",
    password: "",
  };
  const submitHandler = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    console.log(state);
  };
  const { state, bind } = useForm(initialState);
  const { email, password } = state;
  return (
    <div>
      <form onSubmit={submitHandler}>
        <div>
          <input type="text" name="email" {...bind} value={email} />
        </div>
        <div>
          <input type="password" name="password" {...bind} value={password} />
        </div>
        <button type="submit">Send</button>
      </form>
    </div>
  );
};
export default Auth;