React Forms Full Tutorial - Validation, React-Hook-Form, Yup

Use code: PEDRO for 20% off ^
Here is the command I used to install all packages: yarn add react-hook-form yup @hookform/resolvers

In this video I teach you guys how to build forms in react. I use the libraries YUP and React-Hook-Forms to help me.

-
-

Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Timestamps
00:00 | What we are building
03:01 | Implementation

Tags:
- React Forms
- Forms in React
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial

[gotemperory]

what worked for me is:
const { register, handleSubmit, formState: { errors } } = useForm({
resolver: yupResolver(schema),
});

instead of

const { register, handleSubmit, errors } = useForm({
resolver: yupResolver(schema),
});
and
{...register('password')}
instead of
ref={register}

[monikabhardwaj]

A very good tutorial. Because of the new version release there are few changes that we have to do.
1. Error is now a part of formState so use it like below instead of const{register, handleSubmit, errors}

const{register, handleSubmit, formState: { errors }} =useForm({
resolver:yupResolver(schema),
});

2. replace ref={register} to {...register("phone_number")} , replace "phone_number" with the name of your field.

[iqra.manzoor]

I am using the same code with react version 18.1.0.But it is not working, browser is displaying white screen.How can I resolve this issue?

[df]

It is amazing to see this kind of content coming from a Brazilian guy, thank you there

[fancyAlex]

In v7, it should be like this, replace ref with an obj like this

<input

type="text"

name="firstName"
{...register("firstName")} //previously was ref={register}
placeholder="First Name..."
/>
<p> {errors.firstName?.message} </p>
Thank you for this tutorial. I was getting tired reading the react-hook-form documentation.

[guythomas]

This is an excellent tutorial, thank you! One small criticism - it's not good practice to rely solely on front end validation, so I would revise the comment in this video "You can safely make a fetch request... and it should be completely safe because you're only submitting the data if it passes through the layer of validation". Someone could easily craft a request via postman or something and submit direct to your server. Always employ server validation.

[benitomunga]

Getting Uncaught TypeError: path.split is not a function in react:-
react-hook-form updated to 7.0.0 from 6.X.X and has breaking changes:
You have to replace all ref={register} with {...register('value_name')}👍

[adennis]

Not gonna watch it right now cause no time but I'm gonna like it in advance

[ayushdedhia]

Your tutorials are just amazing and easy to grasp the concept ❤️🔥

[linmus]

You're so badass! I'll go out on limb and say that your channel is gonna have millions of subscribers. I do have a feeling of that. The efforts you're exerting into the videos you're cranking out are gonna pay off. It's a top-tier channel. You're freaking killing it. Love from the US.

[brijeshp]

hello from india iam getting error like this = Cannot read properties of undefined (reading 'firstName')

[brosethkator]

Hi
PedroTech, what extension you use to detect file size when import library? Eg: import React from "react"; this part -> "7. 2K (gzipped: 2.9K)
"
Thanks.

[gotemperory]

I am having the same issue : Its Giving an error '' TypeError: Cannot read property 'firstName' of undefined '', so I had to do "{...register('firstName')}" instead of ref={register}. But still says
Also not displaying errors, even if I copy paste all of your code. It looks like errors is undefined - "Cannot read property 'firstName' of undefined"

[mpv]

Great video! I'm just learning react. The course I was taking used redux-form \ redux. I was trying to do the right thing (I think) and make a radio button it's own component so it could be shared in any form. It was a nightmare because of all the state management between components. I never did get it to work. So I was ready to try something new, even if I can't make the radio button it's own component (I'm sure you can). A google search of what are the best libraries for forms got me to react-hook-forms, which led me here. Thank you so much for showing everything from beginning to end. Very helpful and useful.

[bluebill]

Thank you very much for putting up this video tutorial!

[lesharper]

I don't understand. Why use yup if react-hook-form has built-in validation that works fine and you don't need extra libraries loading the bundle

[anisuzzaman]

If i use react hook from need to click submit button two times otherwise not work and if i give any default value in input field without mouse cursor pointer click those input field data not take or pass.could you tell me why ????

[andrscrrn]

Very clear explanantion! Thanks Pedro!

[sf]

Sure it's a good tutorial but avoiding as it only covers 1 control type - need checkboxes and radio buttons.

[anshunarayan]

Although you are speaking in an american accent but your lectures are too easy to understand😊