Hi Pedro. I just want to say, all the way from Nigeria, thank you so much for these React videos. Not everyone can afford those paid courses and you have been a lifesaver. Please keep it up.
for the required, min, max, minLength, maxLength feature we can directly use the default input tag properties. For that why should we use Yup package methods like requried(), min(), ... ? like this (This is working as expected):
Hi Pedro, this video is fantastic - very clear, very concise and so much easier to adopt these libraries than to write it yourself - thank you for posting this 🙂
Pedro you are the best!!! I ve been studying full stack development for a year, my dream is to change career and be a programmer. Your videos are great , you speak really clearly and it is easy to understand even for a non native English speaker, keep up the good work!!
Thank you for this efficient way to validate form inputs which is essential for every app with a sign in. Thank you for all your content. Yours has become the first resource I check for whenever I want to learn about something.
Pedro, I have been following your videos on TH-cam. you are simply the best. you make programming so easy for people like us. thank you so much. George from Nigeria.
Thank you Pedro for these videos and lessons, and for taking the time to teach so many people, including myself. Hopefully I can land my first front-end developer job soon and donate to the channel. You are amazing! 😁
This is good just need to wrap my head around it. Would be cool if you can make a video on how to read and understand documentation, best practices and how to apply them accordingly.
Thanks a lot, dude! This short video hooked me up big time! It would be interesting to see an extension of this video, where it could include 'masks' for the input fields. It would give a more professional look to the form overall. Aside from that, this is a really good tutorial, thanks again! Cheers from Brazil!
If you continue like this, you will become the undisputed react king 🙂🙂.. you are really amazing bro ... Only I see and this is a personal opinion that the best way to control the form is the normal way without using the form-hook only useState ... it is enough to control the inputs and outputs 👍❤️🇩🇿
react-hook-form I think is the most flexible, fewer lines of code. If you want to handle everything yourself - no dependencies philosophy - maybe you would opt out of it...
@@houssemflutter2722 I think you grossly misunderstood me haha. I am just saying - if you want to handle the issue with forms flexibly - use rhf. If not, sure you can opt out of it/not use it. What has respect have to do with anything?
@@preslavgetov1330 Oh my God, I really misunderstood, I apologize brother, I understood that you want me to withdraw from the video because I do not like using libraries,sorry brother, I will delete the comment and I am very honored to be your friend 🤦🏻♂🤦🏻♂
Thanks Pedro, I’m really enjoying and learning a lot from this serie! I saw another youtuber saying that Zod is the industry standard for validation nowadays. Any reason for choosing Yup over Zod?
thank u so much bro it was so amazing video bro and I did follow you until the end so everything was perfect bro and I'll upload it to my GitHub just for my self for future thx bro
Hi Pedro, You explanation is very clear and I am able to make a form in react by following your video. One question I have is how can we validate the input as user type without submitting the form? I think that would improve user experience even more. Thanks!
Thank you so much for the Course Pedro. It's amazing - I am learn so much. One Question though: Would I use YUP and Typescript combined? ... Or is it more like only one of the two?
the validation for age error looks like these with empty field on it age must be a `number` type, but the final value was: `NaN` (cast from the value `""`). how can we change it
How to customize the error message of the "number input" if the user does not write their age? the default error message is really ugly :) But as usual you're doing an amzing job bro!
{...register("name")} this line is not letting me type anything in input box.....any idea why? I have used custom input fields and I know its this line which is causing the trouble because I'm able to type once I comment out this line............. Please help @pedro
Gj my friend, how I can validate arrays inputs like select with multiple values or a file input like an filepicker in Yup ? Thanks mate congrats from Brazil.
My form is returning (Module parse failed: Unexpected token (51:21) You may need an appropriate loader to handle this file type. | columnNumber: 13 | } > }, errors.fullName?.schema), /*#__PURE__*/React.createElement("input", Object.assign({ | type: "text", | placeholder: "Email") this error will please guide me
Anyone know how we would get rid of the space between each input? I tried using a ternary to display the or nothing but can't get the space to go away.
Someone already wrote the solution in the comments. You can check it out but it's basically using a ternary operator like this {errors.fullName?{errors.fullName.message}} you can also use && instead of ?
thanks pedro for such a beautiful course my friend . i am learning a lot from you .. but I am facing a problem here in yup.string().required() function in schema. string is not working properly . if a enter some numbers instead of sting in Name . it is accepting it as a string of integer. can you please check it ?
![ReactJS Course [12] - Custom Hooks Tutorial](http://i.ytimg.com/vi/aeMJfoGfWT4/mqdefault.jpg)
![ReactJS Course [12] - Custom Hooks Tutorial](/img/tr.png)
![ReactJS Course [10] - React-Query Tutorial | How to Properly Fetch Data in React](http://i.ytimg.com/vi/SYXvHXOJzwc/mqdefault.jpg)
you can write:
{errors.fullName && {errors.fullName.message}}
instead of:
{errors.email?.message}
you right too, but look at both codes again,
you can tell why his way is better. his more minimalist
Hi Pedro. I just want to say, all the way from Nigeria, thank you so much for these React videos. Not everyone can afford those paid courses and you have been a lifesaver. Please keep it up.
for the required, min, max, minLength, maxLength feature we can directly use the default input tag properties. For that why should we use Yup package methods like requried(), min(), ... ?
like this (This is working as expected):
that is what I was thinking. Maybe there is something that I don't know about the input tag that makes it unsafe??
Hey Pedro, thank you for this ReactJS Course as well as all the other videos you've posted.
Thank you for the support! I am happy to hear you liked the course :)
Hi Pedro,
this video is fantastic - very clear, very concise and so much easier to adopt these libraries than to write it yourself - thank you for posting this
🙂
Pedro you are the best!!! I ve been studying full stack development for a year, my dream is to change career and be a programmer.
Your videos are great , you speak really clearly and it is easy to understand even for a non native English speaker, keep up the good work!!
Thank you for this efficient way to validate form inputs which is essential for every app with a sign in. Thank you for all your content. Yours has become the first resource I check for whenever I want to learn about something.
There is something about your way of teaching.. It sinks in immediately.. Thanks Pedro
Thank you for this video! It's really amazing that you use real tools to explain, not just manually write some validation using if statements etc...
Simple and clear explanation. Thank you.
Pedro, I have been following your videos on TH-cam. you are simply the best. you make programming so easy for people like us. thank you so much. George from Nigeria.
You are directly teaching the thing that which really needed 👍👌
Pedro, Thank you so much! You're an excellent teacher and you stay on topic; making it easier to grasp the concept.
Your tutorials have helped me a lot. When is the backend course coming?
Using React-Hook-Form and Yup to create React Forms, so clearly explained. Thanks, Pedro.
{2022-11-13}. Implemented:{2022-11-14}
Hey, bro massively appreciate your efforts and respect your teachings!
Please can you make a series for next Js .. I just finished the next Js video you have. It was really good. I want to learn more
You have the best react contents bro and your explanation is top notch. Keep em coming
Plz make playlist with material ui alongwith react hool form and yup explore all functions of react hook form like watch setValue and other
Thank you Pedro for these videos and lessons, and for taking the time to teach so many people, including myself. Hopefully I can land my first front-end developer job soon and donate to the channel. You are amazing! 😁
This is good just need to wrap my head around it. Would be cool if you can make a video on how to read and understand documentation, best practices and how to apply them accordingly.
Great vid ! I wanted to do exactly the same. Use react hook form + yup validation. You saved me the trouble of reading through the docs
Thanks pedro...I was searching a video on this topic
Thanks a lot, dude! This short video hooked me up big time! It would be interesting to see an extension of this video, where it could include 'masks' for the input fields. It would give a more professional look to the form overall.
Aside from that, this is a really good tutorial, thanks again! Cheers from Brazil!
Cannot read properties of null (reading 'useRef')
TypeError: Cannot read properties of null (reading 'useRef') I am getting this error why?
I cant solve it
Learn lots of things from this video.
This was the perfect tutorial, thank you man
If you continue like this, you will become the undisputed react king 🙂🙂.. you are really amazing bro ...
Only I see and this is a personal opinion that the best way to control the form is the normal way without using the form-hook only useState ... it is enough to control the inputs and outputs 👍❤️🇩🇿
There is no correct answer, but I do recommend using a library such as react-hook-form
react-hook-form I think is the most flexible, fewer lines of code. If you want to handle everything yourself - no dependencies philosophy - maybe you would opt out of it...
@@houssemflutter2722 I think you grossly misunderstood me haha. I am just saying - if you want to handle the issue with forms flexibly - use rhf. If not, sure you can opt out of it/not use it. What has respect have to do with anything?
@@preslavgetov1330 Oh my God, I really misunderstood, I apologize brother, I understood that you want me to withdraw from the video because I do not like using libraries,sorry brother, I will delete the comment and I am very honored to be your friend 🤦🏻♂🤦🏻♂
Thanks for all these videos Pedro. We really appreciate your channel.
Pedro you are a great instructor. Thank you for your contribution.
this guy just nailed.
You are the MVP Pedro! Your videos are the best!
you're really making react look easier ♥♥♥
Pedro, we are waiting for new series!!! millions thanx for your wirk!
U can write form validation from the HTML ex:
Thanks, Pedro. Your video is clean and useful. And helping me to get a job!
Thanks Pedro, I’m really enjoying and learning a lot from this serie!
I saw another youtuber saying that Zod is the industry standard for validation nowadays. Any reason for choosing Yup over Zod?
Thank you so much Pedro for all this episodes!
thankyou bro , please include file upload and select box in this form..
thank u so much bro it was so amazing video bro and I did follow you until the end so everything was perfect bro and I'll upload it to my GitHub just for my self for future thx bro
Thank you so much Pedro.
thanks alot bro it was something very important to know
Hi Pedro, You explanation is very clear and I am able to make a form in react by following your video. One question I have is how can we validate the input as user type without submitting the form? I think that would improve user experience even more. Thanks!
thanks a lot, Pedro. you are amazing
Thanks Pedro...
Love from India ❤️🫂
Im like so much the course. If someone already work with React see this comment, these librarys is being used yet?
Very Helpful content bro
love from india
for validation shouldn't we use html5 validations? it has almost all validations that we did in this video - type= "email", required etc
just started folowing this react course is it gonna be complete like redux and all that or just some basics
Thank you so much for the Course Pedro. It's amazing - I am learn so much. One Question though: Would I use YUP and Typescript combined? ... Or is it more like only one of the two?
Combined!!
Thanks a lot for all your videos! Very helpful 🙂
thnx pedro sir for this awesome video
Good job, Pedro! Thanks. Please, tell what a terminal extension for suggestions you use?
Fig!
Thank you!
Appreciate your series
great explanation @pedroTech 👏👏
Thanks a lot Pedro!
great one pedro
Im from Philippines bro your so great ❣️ I appreciate all of your tutorials more videos bro Godbless ❣️
very effective and helpful
awesome lesson bro !
Thank you for this very good Tutorial. I wonder, how do i clear the values after submitting, Thank you
You can put required in the input tho. And how can you put characters when the input type is number??
Great video 👊
@PedroTech there will be also a REDUX tutorial included? I mean for React 18 .... Ty for your work bro :D you're amazing !😇
Bro, could you tell, me how you get autocomplete suggestions on your terminal when entering any command?
Hi Pedro. I was practicing this and I realized these two libraries don't work with styled-components. Do you know why or if there's a way to do it?
How yout terminal sujjesting you the packages?
I need this awesome thing right now))
Fig!
@@PedroTechnologies thanks
@Pedrotech After clicking the submit button how do we clear all the inputs in the input fields ?
You can create a ref to the inputs and set their values to an empty string. I didn't teach useRef in this course, buut its not that complex!!
Thanks man keep doing great videos . Good luck
really appreciated !!
Awesome tutorial thank you
thank you pedro bro
Please continue to reactjs with realtime project
I want yo give you a challenge, What if you make something with mui autocomplete?
Pedro, you are awesome!
Nice tutorial
Awesome content♥️
ah bruh that terminal intellisense is so sick rip me, a windows user
the validation for age error looks like these with empty field on it age must be a `number` type, but the final value was: `NaN` (cast from the value `""`). how can we change it
Wow, thanks a lot!
well done🙂
How to customize the error message of the "number input" if the user does not write their age? the default error message is really ugly :)
But as usual you're doing an amzing job bro!
I do customize it through required function but it says that "age must be a number type but it gets NaN" !! isn't NaN a type of number LOL
NaN stands for Not-A-Number hahahaha
@@PedroTechnologies yea but if you check its type you will find it type of number 😁
Try "typeof NaN" you'll get number!..
Seems weird and now i just knew why javascript is written in just ten days lol
Hey Pedro, does this handle the server side of things? Or is this solely client-side?
{...register("name")}
this line is not letting me type anything in input box.....any idea why?
I have used custom input fields and I know its this line which is causing the trouble because I'm able to type once I comment out this line.............
Please help @pedro
Tq so much Pedro....😇
Plz explore all its features with useFieldArray watch setValue💥
Gj my friend, how I can validate arrays inputs like select with multiple values or a file input like an filepicker in Yup ? Thanks mate congrats from Brazil.
very nice man
My form is returning (Module parse failed: Unexpected token (51:21)
You may need an appropriate loader to handle this file type.
| columnNumber: 13
| }
> }, errors.fullName?.schema), /*#__PURE__*/React.createElement("input", Object.assign({
| type: "text",
| placeholder: "Email")
this error will please guide me
Awesome!
Hey Brotha, why in string() method also accepting numers . // In the Name Field 🤔
Anyone know how we would get rid of the space between each input? I tried using a ternary to display the or nothing but can't get the space to go away.
Someone already wrote the solution in the comments. You can check it out but it's basically using a ternary operator like this {errors.fullName?{errors.fullName.message}} you can also use && instead of ?
Thank you pedro for teaching react btw how to post data using react forms and please tech us redux after this course
hey by adding the register in input the ui is not taking values
great video
thanks pedro for such a beautiful course my friend . i am learning a lot from you .. but I am facing a problem here in yup.string().required() function in schema. string is not working properly . if a enter some numbers instead of sting in Name . it is accepting it as a string of integer. can you please check it ?
Would this work with typescript?
Great 👍 video
You aren't going to continue this course?
I am, next episode comes out tommorrow! I took a week break but im back strong 💪
God bless you!
amazing!