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):
3 Replies
Hi @soto76. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Hmm, I don't know enough to give you a confident answer yet. However, based on the information provided, it seems like you might be having issues with the
useForm
hook and the control
prop.
In refine, useForm
is a hook used to manage forms. It returns the necessary properties and methods to control the form. The control
prop is used to control the form's state and actions.
Here's a basic usage of the useForm hook from the refine blog:
You should ensure that the form instance returned by useForm
is connected to your Form element. If you're using a library like Ant Design, you would typically pass the form
instance as a prop to the Form
component.
For more information, you can refer to the refine documentation (https://refine.dev/docs) and blogs (https://refine.dev/blog).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@934748406096736296> kapa.ai is still learning and improving, please let us know how it did by reacting below
like-gold•11mo ago
Turns out you can pass control down to the child. I just had the wrong type. I had control as an
object
type, instead it should be Control
https://react-hook-form.com/ts#Control