wet-aquaW
Refine•3y ago•
4 replies
wet-aqua

Reuse Create Form

I am trying to create a form component called 
UserForm
 that's rendered by both StudentCreate and TeacherCreate components. Some input values are successfully submitted to the backend, but some inputs are not getting submitted.

Possible problem: For the inputs that are not getting submitted, it might be because of the control return prop from useForm. I am calling useForm from in both child and parent component, causing a disconnect.

What I tried: I tried to get the control prop in the parent component(StudentCreate) and then pass it down to the child component(
UserForm
) but control is supposed to be an instance of Control class and it's being passed as a regular pojo object, so I can't use the methods in control. So I'm not sure what to do next, really looking forward to your answer!

Code for parent component is below, code for child(UserForm) is attached.

The fields that do not submit (but show up in form ui) are classes, time_zone, class_format, start_date, and end_date

Code for StudentCreate (Parent component that renders UserForm): 
export const StudentCreate: React.FC<IResourceComponentsProps> = () => {
  const {
    saveButtonProps,
    refineCore: { formLoading },
    register,
    setValue,
    formState: { errors },
  } = useForm();

  // const classesData = useFetchClasses();
  return (
    <Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
      <UserForm
        role="Student"
        prefix="s"
        register={register}
        setValue={setValue}
        errors={errors}
      />
    </Create>
message.txt8.03KB
Was this page helpful?