The Best Way to Build Forms in React - React Hook Form Tutorial

This is how I use React Hook Form to build forms in my web apps.
There are some advanced concepts in the video as well. I hope it can be helpful to someone.

---------------------------------------------------------------
Inquiry and Collaborations:
---------------------------------------------------------------
Join my Discord:
---------------------------------------------------------------
Follow me on twitter:
---------------------------------------------------------------

Chapters:
0:00 Introduction
1:37 Starting Point
2:17 Validation Schema
3:30 React Hook Form basics
6:30 Custom Input
8:24 Third Party Component

[StephenRayner]

Keep doing this exact format and you will go to the moon!

[utpwphu]

Bro, thanks! I spend hours, that to solve a one problem, I checked other tutor videos, I read a documentation, but only you helped me.

[CodingWithLewis]

React Hook Form is a game changer! I have to give Zod a try!

[allefdouglas]

I have being thinking on how to improve my components, and i think using the useFormContext inside each component is a better approach then passing the control or register as a param. Also, i like to create the content of my form without having the <form/> wrapping it. I will only wrap the component with the form when i am using it. Therefore, i can use the same form for creation and edition of a content, and have the power to control anything i need using the formMethods from useForm()...

Ex:

const Input = ({ name, label, ...props }) => {
const { register, formState: { errors } } = useFormContext()
const error = errors[name]?.message
return <div>
{label && <label
<input {...props} {...register(name)} id={name} />
{error && <span>{error}</span>}
</div>
}

const SignInForm = () => {
const { formState: { isSubmitting } } = useFormContext()
return <div>
<Input label="Username" name="username" />
<Input label="password" name="password" type="password" />
<button type="submit" disabled={isSubmitting}>sign in</button>
</div>
}

const SignInPage = () => {
const formMethods = useForm<FormProps>({ resolver: zodResolver(schema) })
return <FormProvider {...formMethods}>
<form
<SignInForm />
</form>
</FormProvider>
}

[Vladik]

Awesome video, like the quality improvements. The animations and the background music are great. Also, I like how you make simple explanation on what forms are. I think it’s very useful to get attention of people who not that familiar with web development and just want to watch some random tech video like I do 😂 In my opinion the quality of the production is crucial for the videos like this. So I would continue with this approach because from my perspective it will increase the amount of viewers. But that’s just my opinion. All in all the only thing that’s really matters is how you enjoy it. If you think that keeping this production quality is too tedious and may affect your performance than it definitely not worth it or maybe you should hire someone to do that work for you. Any ways great job 👍🏻

[atanusamanta]

Nice content. Thanks for sharing.

Can you make admin panel design with tailwind in your upcoming videos. !!

[cheattube]

thats beautiful thanks, you are a damn good teacher

[darkshadowgks]

appreciate if you could make a series of react tutorials by building a complete project