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}

@PedroTechnologies

3 жыл бұрын

Appreciate it! This is the new updated version!

@hmsm5701

3 жыл бұрын

thanks a lot

@akhiltheloquacioussoul

3 жыл бұрын

Thank you so much :)

@andriitsvirko7296

3 жыл бұрын

thanks a lot!!!!!!!!!!!!!!

@TheRonron1994

2 жыл бұрын

I'm getting this error instead Error: Function components cannot have string refs. We recommend using useRef() instead.

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

@PedroTechnologies

3 жыл бұрын

Hahaha thank you so much! Brazil needs to grow in the programming community!

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.

@ujjawalchatterjee

3 жыл бұрын

Appreciate it

@sebastiandrozd233

2 жыл бұрын

+1

@ayjayaywhy

11 ай бұрын

Appreciate it

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.

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.

@PedroTechnologies

3 жыл бұрын

Hahaha I love this kind of comments! Thank you so much! I really appreciate the support!

In v7, it should be like this , replace ref with an obj like this {errors.firstName?.message} Thank you for this tutorial. I was getting tired reading the react-hook-form documentation.

@ak2000_

2 жыл бұрын

TypeError: Cannot read properties of undefined (reading 'firstName')

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.

thank you, buddy, find a good solution after 3 days of struggling with form and validation. just react-hook-from had changed to version 7 and it needs some small change but this tutorial is absolutely brilliant.

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

@PedroTechnologies

3 жыл бұрын

Happy to hear that!

perfect speach (not too slowly and not too fast) - thank you so much, it's very useful!

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?

Mano, ótimo conteúdo, parabéns. Muito bom saber que existe conteúdo de qualidade assim e que é brasileiro que faz, te desejo muito sucesso.

Thanks for this video, the combination of react-hook-form and yup is just what I need for the form validation in my next project.

Keep on going Pedro, your videos helps me a lot. Appreciate your hard work!

@PedroTechnologies

3 жыл бұрын

Happy to hear that! This comments motivate me a lot!

@junjietan2668

3 жыл бұрын

@@PedroTechnologies no worry pedro. Meanwhile, i have a barrier after working on the form. it is working fine in the form validation. however comes to form submission, the function was not working even though the password is matched. I noticed if i have remove the resolver from useform, it is working fine as the console will printed out the outcomes however the password and Cpassword have no validation. then, if i implment the resolver onsubmit function does not fire up at all. What's the problem? Many thanks.

@muradjadoon619

Жыл бұрын

@@PedroTechnologies I like your videos

./src/Components/Form.js Module not found: Can't resolve '@hookform/resolvers/yup' in 'C:\Users\uscr\Desktop\letreact\src\Components'

i got error : Could not install from "@hookform esolvers\yup" as it does not contain a package.json file...please help me!!

@Dan_ny

3 жыл бұрын

npm install @hookform/resolvers

thanks my friend, it was really a helpful video for me to get into react hook forms. keep up the good work

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

@PedroTechnologies

3 жыл бұрын

Hahaha this makes me happy! Really appreciate the support!

Hello Pedro, I am a big fan of your videos here! Thanks for this one - it is amazing! Could you please also show how to split the form here into a multi-form (at least 3 input steps) and everything then still works - including validation!? That you can e.g. only jump on if everything is correct and that you don't lose any values when jumping back! There are already videos about it - but they are all incomplete or incorrect! Thanks in advance! Best regards Markus

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

mate, you got a talent! thank you, it was simple and clear

Very clear explanantion! Thanks Pedro!

I finally understood react-hook-forms. Thankyou 🙂

Extraordinary explanation thank you so much for your knowledge sharing 😊👌🏼🙏🏼 try to post the video how to bind the form data back to the input fields using yup

Thank you PedroTech for this wonderful resource!

@PedroTechnologies

3 жыл бұрын

Glad it was helpful!

Thanks, it's really helpful for me who just started to learn react stuff

Pedro, muito bom vídeo! Mais um inscrito pra ti... Uma sugestão pro próximo vídeo, fazer validação de arquivos com o yup e react hook form... verificar se o arquivo é muito longo, formato, etc... Ajudaria bastante! Top

@caikhenrik10

3 жыл бұрын

No caso upload de arquivos*

@PedroTechnologies

3 жыл бұрын

Obrigado! Você quer dizer validar arquivos que sao uploaded?

@caikhenrik10

3 жыл бұрын

@@PedroTechnologies isso! Por exemplo validar se o arquivo é uma imagem, e se a imagem não excede determinada altura e largura por exemplo, seria top!

Thank you very much for putting up this video tutorial!

@PedroTechnologies

3 жыл бұрын

Glad it was helpful!!

Your videos are very easy to follow. Thank you 🥂

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')}👍

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.

@munisazatov7416

2 жыл бұрын

'Import cost'

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"

@PedroTechnologies

3 жыл бұрын

THank you! The library updated after I made the video so now its outdated!

@husseinkizz

3 жыл бұрын

@@PedroTechnologies I have the same issue but gonna look into the documentation if that's the case but don't you consider remaking your tutorials to updates over time? Anyways thanks we love your content!

This is gold. Thank you so much!

@PedroTechnologies

3 жыл бұрын

Glad it was helpful!

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 ????

Your tutorials really amazing, thank you Pedro

@PedroTechnologies

3 жыл бұрын

Glad you like them!

Very clear n concise explanation.

@vinayr6232

2 жыл бұрын

Hey Harshit! Glad you liked the video.....would you be interested in exploring opportunities in web development?

Amazing tutorial, really well described. Loved it .

Can you please tell how i get the min value from the field itself not the hard-coded in the schema

Hi dear Pedro! Actually I want to thank you for this really really well-described content , you helped me a lot my bro ❤

Maneiro o canal cara. Parabens!

@PedroTechnologies

3 жыл бұрын

Obrigado, fico feliz!

This helped me a lot, thanks Pedro!

from where did ref come from? when i type it the way you do, it gives me an error

Please tell me how do I clean the values after submitting :) something like reset

THanks for this, great tutorial.

Thank you for this useful video! Is there a way to style the error messages?

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

@frontendwithsalimi

10 ай бұрын

use the useForm like this const { register, handleSubmit, formState:{errors} } = useForm({ resolver: yupResolver(userSchema), });

Hi Pedro, how can I pass the error response from express/mongoose to yup schema to validate email uniqueness? should I put the the error response to state and from there use the state to validate from yup schema? newbie here and kind of lost. thanks

How to do dependent validation. example if first name is predo then only last name is mandatory ?

thank you so much dude

Well done and easy to understand. Thx

hi Pedro, amazing video as always. I have a question: how can i validate a disabled input where the value and placeholder is defined by props? Or there is no needed?

heyy another awesome video from hero keep doing it

@PedroTechnologies

3 жыл бұрын

Thank you! Really appreciate the support!

Thanks a lot for this sir. You helped out a brother

Hey, great vid; what's the extension you use that formats the JS document around 18:13?

thumbs UP!.... Q# what is the best way to design our components in a project......either we use styled-componnets,scss or css......?

@PedroTechnologies

3 жыл бұрын

I like to use styled-components! There is no best way, it is all about preference!

@aneeqrehman4138

3 жыл бұрын

@@PedroTechnologies plz share the link where you have design a full dynamic tamplate using style...

Thank you Pedro.

Great tutorial, can you a tutoral on multi step form with react-hook-form and yup

great tutorial! Thank you a lot

Very clean ...Superb

Awesome tutorial, thanks so much!

The best tutorial. thanks a lot

Gracias Pedro, super bueno el tutorial, facil de entender.

what extension is that you're using where you get syntax definitions while typing? anyone knows?

Amazing! Could you make a video about masked inputs with React? Thanks!

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

Thank you very much Pedro!!!

@PedroTechnologies

3 жыл бұрын

My pleasure!

great tutorial, it really helped

Amazing. Thanks bro

Love your content keep it up.

@PedroTechnologies

3 жыл бұрын

Glad you enjoy it!

Hello, does anybody know which color theme is he using?

errors.firstName?.message is this typescript? Why there is a question mark after firstName? Also I tried to add min(8) characters to password field but error is not showing up for some reason.

@denmccormik7654

2 жыл бұрын

syntax has changed a bit, also "?" - that is javascript, check the docs

Great tutorial! It would be more helpful if you used different form types.

how to get the value to change input, without onSubmit?

@PedroTechnologies

3 жыл бұрын

You can create some states and change them on the onChange property!

How can we validate input type="file" with yup

Thanks!

@PedroTechnologies

2 жыл бұрын

Thank you for the support!

Have you tried required() for Confirm Password?

Easier to use react hook form and typescript then create an interface and attach it as generic to the useForm hook. And also Yup is very large in size

Superb!!

Unfortunately we have already react-hok-form v7 out.

@PedroTechnologies

3 жыл бұрын

Damn, hope it didn't change a lot!

I cannot install @hookform/resolvers/yup and I saw that you crashed on it as well. How did you please import this package?

@lyubomirdias5465

3 жыл бұрын

just add @ hookform / resolvers ---- than import yupResolver from "@hookform/resolvers/yup"

nice amazing thank you

Thank you so much 👍💕👌🙏🤞✌

Nice Pedro

muito bom pedro!

brazil é cabuloso credo 👏🏾

I cannot get the errors to work, even after formState:{errors}. what to do?

@gaurav8113

2 жыл бұрын

Hi Nishad! hope your doubt got resolved. Are you a self-taught programmer?

very helpful !

@PedroTechnologies

3 жыл бұрын

Glad it was helpful!

thanks

Nice, Bro where r u from buddy

@PedroTechnologies

3 жыл бұрын

Thank you! I am from Brazil!

you save me

I got no output, following all the steps you showed

Hey Pedro, excellent series of videos on React. Thanks. Su nombre y apellidos son latinos pero su acento no, cuales su ascendencia? Gracias de nuevo!

Exellent video

muito bom cara!

thanxxx

excellent

Its Giving an error '' TypeError: Cannot read property 'fname' of undefined '' I have used fname everywhere. Checked it Twice Please Help !!!

@PedroTechnologies

3 жыл бұрын

Hey, I don't think I used a variable called fname in the tutorial! I created a property called firstName, maybe the issue is there! Let me knoow if it fixes!

@mohakmaheshwari8756

3 жыл бұрын

@@PedroTechnologies i used fname instead of firstName..... and used it same through out the entire code ... it's still not working.... maybe its version mismatch i don't know And when i use ref={register} it gives me bunch of errors so i had to use {... register ('fname')}

Getting this error anyone please help me Unexpected token: {errors.email?.message} ^

nice work

@PedroTechnologies

3 жыл бұрын

Thank you! Cheers!

Awesome explanation... thank you ++++++++++++++++++++++++++