Use FormContext instead of passing down as props

Author: w3bdesign

refactor/src/components/Checkout/Billing.component.tsx

@@ -1,9 +1,9 @@
 // Imports
 import {
-  FieldValues,
   SubmitHandler,
   useForm,
-  UseFormRegister,
+  useFormContext,
+  FormProvider,
 } from 'react-hook-form';
 
 // Components
@@ -12,54 +12,51 @@ import Button from '../UI/Button.component';
 
 // Constants
 import { INPUT_FIELDS } from '@/utils/constants/INPUT_FIELDS';
+import { ICheckoutDataProps } from '@/utils/functions/functions';
 
 interface IBillingProps {
-  onSubmit: SubmitHandler<FieldValues>;
+  handleFormSubmit: SubmitHandler<ICheckoutDataProps>;
 }
 
-interface IOrderButtonProps {
-  register: UseFormRegister<FieldValues>;
-}
+const OrderButton = () => {
+  const { register } = useFormContext();
 
-const OrderButton = ({ register }: IOrderButtonProps) => (
-  <div className="w-full p-2">
-    <input
-      placeholder="paymentMethod"
-      type="hidden"
-      value="cod"
-      checked
-      {...register('paymentMethod')}
-    />
-    <div className="mt-4 flex justify-center">
-      <Button>BESTILL</Button>
+  return (
+    <div className="w-full p-2">
+      <input
+        placeholder="paymentMethod"
+        type="hidden"
+        value="cod"
+        checked
+        {...register('paymentMethod')}
+      />
+      <div className="mt-4 flex justify-center">
+        <Button>BESTILL</Button>
+      </div>
     </div>
-  </div>
-);
+  );
+};
 
-const Billing = ({ onSubmit }: IBillingProps) => {
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-  } = useForm();
+const Billing = ({ handleFormSubmit }: IBillingProps) => {
+  const methods = useForm<ICheckoutDataProps>();
 
   return (
     <section className="text-gray-700 container p-4 py-2 mx-auto">
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <div className="mx-auto lg:w-1/2 flex flex-wrap">
-          {INPUT_FIELDS.map(({ id, label, name, customValidation }) => (
-            <InputField
-              key={id}
-              inputLabel={label}
-              inputName={name}
-              customValidation={customValidation}
-              errors={errors}
-              register={register}
-            />
-          ))}
-          <OrderButton register={register} />
-        </div>
-      </form>
+      <FormProvider {...methods}>
+        <form onSubmit={methods.handleSubmit(handleFormSubmit)}>
+          <div className="mx-auto lg:w-1/2 flex flex-wrap">
+            {INPUT_FIELDS.map(({ id, label, name, customValidation }) => (
+              <InputField
+                key={id}
+                inputLabel={label}
+                inputName={name}
+                customValidation={customValidation}
+              />
+            ))}
+            <OrderButton />
+          </div>
+        </form>
+      </FormProvider>
     </section>
   );
 };

refactor/src/components/Checkout/CheckoutForm.component.tsx

@@ -112,7 +112,7 @@ const CheckoutForm = () => {
     refetch();
   }, [refetch]);
 
-  const onSubmit = (submitData: ICheckoutDataProps) => {
+  const handleFormSubmit = (submitData: ICheckoutDataProps) => {
     const checkOutData = createCheckoutData(submitData);
 
     setOrderData(checkOutData);
@@ -126,7 +126,7 @@ const CheckoutForm = () => {
           {/*	Order*/}
           <CartContents />
           {/*Payment Details*/}
-          <Billing onSubmit={onSubmit} />
+          <Billing handleFormSubmit={handleFormSubmit} />
           {/*Error display*/}
           {requestError && (
             <div className="h-32 text-xl text-center text-red-600">

refactor/src/components/Input/InputField.component.tsx

@@ -1,4 +1,4 @@
-import { FieldValues, UseFormRegister } from 'react-hook-form';
+import { FieldValues, useFormContext, UseFormRegister } from 'react-hook-form';
 
 interface ICustomValidation {
   required?: boolean;
@@ -11,8 +11,8 @@ export interface IInputRootObject {
   inputLabel: string;
   inputName: string;
   customValidation: ICustomValidation;
-  errors: IErrors;
-  register: UseFormRegister<FieldValues>;
+  errors?: IErrors;
+  register?: UseFormRegister<FieldValues>;
   type?: string;
 }
 
@@ -31,20 +31,24 @@ export const InputField = ({
   customValidation,
   inputLabel,
   inputName,
-  register,
   type,
-}: IInputRootObject) => (
-  <div className="w-1/2 p-2">
-    <label htmlFor={inputName} className="pb-4">
-      {inputLabel}
-    </label>
-    <input
-      className="bg-gray-50 border border-gray-300 text-gray-900 text-sm focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-      id={inputName}
-      placeholder={inputLabel}
-      type={type ?? 'text'}
-      {...customValidation}
-      {...register(inputName)}
-    />
-  </div>
-);
+}: IInputRootObject) => {
+  
+  const { register } = useFormContext();
+
+  return (
+    <div className="w-1/2 p-2">
+      <label htmlFor={inputName} className="pb-4">
+        {inputLabel}
+      </label>
+      <input
+        className="bg-gray-50 border border-gray-300 text-gray-900 text-sm focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+        id={inputName}
+        placeholder={inputLabel}
+        type={type ?? 'text'}
+        {...customValidation}
+        {...register(inputName)}
+      />
+    </div>
+  );
+};