member-registration-form.tsx

      import OrderList from "../components/orderList";
      import { useForm, SubmitHandler } from "react-hook-form";
      const MemberRegistration = () => {
          const [values, setValues] = React.useState({
           
          });
        
          
        
          const { register, handleSubmit } = useForm();
          const [age, setAge] = React.useState("");
         
          return (
            <form onSubmit={handleSubmit(data => console.log(data))}>
              <OrderList />
              <input type="submit" />
            </form>
          );
        };
        
       export default MemberRegistration;

orderList.tsx

import { useEffect, useState } from "react";
import { useForm, useFieldArray } from "react-hook-form";
import hoc from "./hoc";
import { TextField, Stack } from "@mui/material";
import { Box } from "@mui/system";
 const OrderDetails = (props) => {

  
  return (
    <Stack direction="row" spacing={1} >
 
      <TextField   {...props.register(`test.${props.index}.x`)} ></TextField>
      <TextField   {...props.register(`test.${props.index}.y`)}></TextField>
      <TextField   {...props.register(`test.${props.index}.z`)}></TextField>
      <button onClick={() => props.removeindex(props.index)} type="button">
      Delete
      </button>
    </Stack>
  );
};
export default hoc(OrderDetails);

hoc.tsx

import { useFieldArray, useForm } from "react-hook-form";
    const hoc = (WrappedComponent) => {
      return (props) => {
        const { register, control, handleSubmit, reset, watch } = useForm({
          defaultValues: {
            test: [{ firstName: "Bill", lastName: "Luo" }]
          }
        });
    
        const { fields, append, prepend, remove } = useFieldArray({
          control,
          name: "test"
        });
    
        return (
          <form >
            <ul>
              {fields.map((item, index) => (
                <WrappedComponent
                  key={item.id}
                  item={item}
                  removeindex={remove}
                  index={index} 
                  register = {register}
                />
              ))}
            </ul>
            <section>
              <button
                type="button"
                onClick={() => {
                  append({ firstName: "appendBill", lastName: "appendLuo" });
                }}
              >
                append
              </button>
    
            
            </section>
          </form>
        );
      };
    };
    export default hoc;

On the above code I wrapped the OrderList component inside the hoc(higher order component) to display dynamically generated content .member-registration-form.tsx page is the page where component is render.It works perfectly fine as i expected.But I could not extract the data entered when the submit button is clicked.It gives me an empty array.

code sandbox

CodePudding user response：

You are using 2 different instances of the useForm() hook. The reason your not getting any data when you submit your form is because you are using the handleSubmit() function from the first instance in your form component and then you are registering fields with the second instance in your hoc component. You either need to pass the register function down as a prop or you can pass the whole useform function down but you can't strike up 2 different instances and expect them to communicate with each other. You could do something like the following:

member registration form

import OrderList from "./orderList";
import { useForm, SubmitHandler } from "react-hook-form";
import * as React from "react";

const MemberRegistration = () => {
  const [values, setValues] = React.useState({
    amount: "",
    password: "",
    weight: "",
    weightRange: "",
    showPassword: false
  });

  const {register, control, handleSubmit} = useForm({
    defaultValues: {
      test: [{ firstName: "Bill", lastName: "Luo" }]
    }
  })

  return (
    <form onSubmit={handleSubmit((data) => console.log(data))}>
      <OrderList register={register} control={control}/>
      <input type="submit" />
    </form>
  );
};

export default MemberRegistration;

order list

import * as React from "react";

import hoc from "./hoc";
/**
 * https://stackoverflow.com/questions/69912689/higher-order-componnt-does-not-dilver-inputlist
 */
const OrderDetails = (props) => {
  return (
    <div>
      <input {...props.register(`test.${props.index}.firstName`)} />

      <button onClick={() => props.removeindex(props.index)} type="button">
        Delete
      </button>
    </div>
  );
};
export default hoc(OrderDetails);

hoc

import { useFieldArray } from "react-hook-form";
import * as React from "react";

const hoc = (WrappedComponent) => {
  return (props) => {
    const { register, control } = props;

    const { fields, append, remove } = useFieldArray({
      control,
      name: "test"
    });

    return (
      <div>
        <ul>
          {fields.map((item, index) => (
            <WrappedComponent
              key={item.id}
              item={item}
              removeindex={remove}
              index={index}
              register={register}
            />
          ))}
        </ul>
        <section>
          <button
            type="button"
            onClick={() => {
              append({ firstName: "appendBill", lastName: "appendLuo" });
            }}
          >
            append
          </button>
        </section>
      </div>
    );
  };
};

export default hoc;