React Hook Form - Controller

In this video tutorial, we are going to re-build React Hook Form Controller. This will expose the mechanism behind this component.

[fitzsimonsdev]

This is super cool. Thanks for showing off how this works. Complex forms can be so challenging. I really appreciate all the work you put in

[calvinwilliams]

It is very helpful but this is advance video

[malakov]

Really appreciate the videos and documentation you have around react-hook-form. It’s legendary. I’m glad I used it in my last project.

[hesamalavi]

Hey Bill, thanks for the video. A quick question, why do we need to spread the props in the Controller? What would happen if we don't (i.e. don't use the spread operator)?

[tomasburian]

Do you guys have a guide for other types of inputs? It's quite frustrating everyone just shows a simple text field while the most of us in the field have to deal with selects and others. I'm having problems with using Controller with MUI components and there's little to go on.

[Zullv]

Why are you defining your own Controller instead of using the Controller component that already comes with the library? What's the point of the exercise?

[codinginflow]

If my input component has some weird onChange argument signature, is Controller the only way to get the input into RHF?

[coffeefps]

50fps is pretty weird, sometimes it's smooth, sometimes not. Regardless, very informative video.

[usf]

4:20 without changing `onChnge:props.onChange` to `onChange: (e)=> props.onChange({target:{name, value:e.target.value})` the form submission functionality doesn't work properly, I test it, but while the `e` object have the target property with same values for `name` and `value` why `onChage:props.onChange` doesn't work?
(I see that if we have ability for dirctlly spreading `register` return properties on a HTML input element some how because of passed `ref` the calling onChange(e) does the job, but ...)

[brahimo]

This is amazing, Thanks fo this amzing library

[GOKU-fnhe]

Hey I am using rhf with yup. Now I make input components using controller and useFormContext and use that component using FormProvider. Now I want some validation in component level and some validation in page level. So How can I do that.? And I am using mantine UI.

[raphael.portela]

can you do an example of a complex form that has update and a lot of select values that comes from gql quries? im really lost, im using controller but i think i need something more

[stark]

Hi, Could you please create a video on useController. I am unable to find any tutorial/video on it. or creating reusable component(mui) with useController and validation. ty

[navya]

Just I have simple form with 5 text fields
With MUI 5 and React hook forms.

I created a component for text field in MUI 5 .

I want to write a controller for every field or in component level using useFormContext...

Which is the best practice...

Please give reply....

Please do one sample code in sandbox ..

Please...

[navya]

I am using react hook forms with react table using field array.It is working fine but table has 100 records I want update only specific 5th record....please give reply

[saraseado]

Hey Bill, what is the use of field.onChange() in the docs it says "A function which sends the input's value to the library. It should be assigned to the onChange prop of the input." what is the library? and also can I set a custom onChange() ? what I am trying to do is modify a value according to another registered value. I tried doing this:

<Controller
render={({ field }) => (
<Select
style={{ width: "100%" }}
{...field}
onChange={(e) => handleChange(e)}
>
{children}
</Select>
)}
name={name}
control={control}
/>

but it doesn't work

[DeViLThrn]

Hi Bill, i really hope u reply this.. im facing an issue the data from onSubmit return empty object.. im using MUI, and each custom textfield, autocomplete etc ill make sure they are connected with control from useFormContext.. and i also double check my form was wrap with FormProvider and pass all methods from useForm.. talking about useForm hook, i also provide the defaultValue and resolver.. so my question, in your experience, what the causes submit will return the empty object..

[workflowinmind]

Came here from the doc, but you are reimplementing the builtin controller here right?

[WweRoman]

I am using react table with react hook forms. If, I have 100 records but if I try to update single field using index its updating 100 records (we are using onBlur on each fields). I want to update only single field and after entering 100 records, I am facing performance issues.
Example:
<Table
columns={Columns}
data={fields}
updateMyData={updateMyData}

/>

please give any example

[jaydeeppatil]

Idk why people don't watch these videos instead of going to some random youtubers
Thanks a lot for these awesome tutorials