Context provider/hook for easy form management

FormProvider.jsx

import React, { createContext, useContext, useState } from 'react'

const FormContext = createContext()

export const useForm = () => {
  const context = useContext(FormContext)
  if (context) return context

  const [formData, setFormData] = useState({})

  const setField = (val, key) => {
    setFormData(prev => ({
      ...prev,
      [key]: val,
    }))
  }

  return {
    formData,
    setFormData,
    setField,
  }
}

export const FormProvider = ({ children }) => {
  const formContextParams = useForm()

  return (
    <FormContext.Provider value={formContextParams}>
      {children}
    </FormContext.Provider>
  )
}