useForm Hook

example.tsx

import React, { useState } from 'react';
import './App.css';

export function useForm<FormFields>(initalValues: FormFields): [FormFields, (event: React.ChangeEvent<any>) => void] {
  const [values, setValues] = useState<FormFields>(initalValues);

  return [
    values,
    event => {
      setValues({
        ...values,
        [event.target.name]: event.target.value
      })
    }
  ]
}

type FormFields = { username: string, password: string }

const App = () => {
  const [values, handleChange] = useForm<FormFields>({ username: "", password: "" })

  return(
    <div>
      <h2>Test Form</h2>
      <input placeholder="username" name="username" value={values.username} onChange={handleChange}/>
      <input placeholder="password" name="password" value={values.password} onChange={handleChange}/>
    </div>
  );
}
 
export default App;