React Custom Form with Hooks Example

CustomForm.js

import React, { useRef, useState, useEffect } from "react";

const useForm = ({ initialValues, onSubmit }) => {
  const [values, setValues] = useState(initialValues || {});
  const [errors, setErrors] = useState({});
  const [touched, setTouched] = useState({});
  const [onSubmitting, setOnSubmitting] = useState(false);
  const [onBlur, setOnBlur] = useState(false);

  const formRendered = useRef(true);

  useEffect(() => {
    if (formRendered.current) {
      setValues(initialValues);
      setErrors({});
      setTouched({});
      setOnSubmitting(false);
      setOnBlur(false);
    }
    formRendered.current = false;
  }, [initialValues]);

  const handleBlur = (event) => {
    const { target } = event;
    const { name } = target;
    setTouched({ ...touched, [name]: true });
    setErrors({ ...errors });
  };

  // Set any errors if applicable
  const handleChange = (event) => {
    const { target } = event;
    const { name, value } = target;
    event.persist();
    setValues({ ...values, [name]: value });
  };

// If using files
// 	// Combines the file values from upload field to the values
//   const handleFileChange = (event) => {
//     const { target } = event;
//     const { name, files } = target;
//     event.persist();
//     setValues({ ...values, [name]: files[0] });
//   };

  // Set any errors if applicable and submit with onSubmit
  const handleSubmit = (event) => {
    if (event) event.preventDefault();
    setErrors({ ...errors });
    onSubmit({ values, errors });
  };


  return {
    values,
    errors,
    touched,
    handleChange,
// Uncomment if using files
//     handleFileChange,
    handleBlur,
    handleSubmit,
  };
};

const CustomForm = () => {
  const initialValues = {
    name: "",
    post: "",
    file: "",
  };

	 const onFormSubmit = ({ values, errors }) => {
			console.log("Submittedt: ", values, errors)
	 }

  const { values, errors, touched, handleChange, 
// 	 Uncomment if using files
// 	 handleFileChange, 
	 handleBlur, handleSubmit } =
    useRecordKitForm({
      initialValues,
      onSubmit:  onFormSubmit
		});

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Name</label>
        <input
          type="text"
          name="name"
          required
          onChange={handleChange}
          value={values.name}
        />

        <label>Post</label>
        <input
          type="text"
          name="post"
          required
          onChange={handleChange}
          value={values.post}
        />
      </div>

// Uncomment if using files
//       <div>
//         <label>Upload</label>
//         <input
//           type="file"
//           name="file"
//           required
//           accept="audio/mp3,audio/x-wav,audio/x-m4a,audio/*;"
//           onChange={handleFileChange}
//         />
//       </div>

      <button type="submit">Upload</button>
    </form>
  );
};

export default CustomForm;