Back to Rules

A custom hook for managing form state in React

Code

function useForm<T>(initialState: T) {
  const [values, setValues] = useState<T>(initialState)

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target
    setValues(prev => ({ ...prev, [name]: value }))
  }

  const resetForm = () => setValues(initialState)

  return { values, handleChange, resetForm }
}
react
Posted by Tejashwa Tiwari1/29/2024