Wonderful tutorial, crisp pace, clearly understanding the contents, well presented with clear explanations. Glad to have come across this video. Keep up the good work!
Thanks for the video! This seriously helped me out since I was stumped on this topic despite trying to google around for particular documentation for a few hours. Love the verbal detail!
Ohoho. Thank you, Leigh! This is exactly what I need for my project. Last time, I did all of that basically all by myself, because I was repairing old app that used Polymer 0.8, which does not use npm. I wouldn't say it takes so much code to write this. But with 6 fields, validations, blurring, touching, submitting, resetting... It does.
Super neat and straightforward tutorial on Formik. It does help! Thank you Leigh. Would be great if you could make a video on image-uploading using Formik and Yup.
Hey Shaho! I've heard from a couple people to cover forms with plurals... like an array of field combos for adding multiples of something, multi-step forms, and conditionally rendering/validating fields (Canada == Postal Code, USA == Zip Code). All in the works!
Hey Ajay! I haven't worked much with React Native yet... I should get more into it eh? I just love the web so much :D Can deploy updates without needing blessings from Google or Apple.
Good video and also i've seen that've introduced Formik that is great! But please try final-form -> react-final-form, we're using it in production and it's just ideal form library!
Your explanations were clear, methodical, and easy to follow thanks for that! As somebody that’s new to HTML/JS would you suggest that I learn the old school method of creating forms before starting to use Formik? Manually learning how to handle all these features like error validation, etc.? Or is it generally accepted to just start using all these frameworks to offload the learning curve? Thanks again.
Hey there! Thank you :) Honestly, use whatever works for you... if you can ship stuff quickly and learn the details later, go for it. If you prefer to learn the details first, go for it!
Great video Leigh! Here's a suggestion for a video: making forms with nested repeating fields. For example, adding multiple addresses for users. So how to do this with formik and validation of each item in the array using Yup.
Great idea Dominik! I was also thinking about doing something about conditional validation... Canadian Postal Code vs US Zip Code depending on the country you choose.
@@leighhalliday unfortunately can't get how to make the mutation with GraphQL and Apollo server when submitting the sighnup form((( Could you please make a video or explain somehow this staff?
Thank you Leigh. Very clear and helpful especially for beginners. Would've been great if you created a useFormik hook and use it instead of render props :)
Hey Eliot! Good question. I don't think there is anything stopping you from placing this logic in another file/function, and just importing it into your component. That's probably preferred actually! Easier to test in isolation.
Unless your needs are very basic or you are very lazy, roll your own. There is some good stuff in this library, but it has some huge gaps (form-level onChange???) and the most useful part (the validation) is actually provided by yup. I spent a couple weeks with Formik before abandoning it for a 100-line version I wrote myself that met all my requirements. React plus something like yup is all you need to implement very robust web forms.
16:36 We are already telling what clicking a submit button should do in onSubmit prop of Formik. So then why do we need to bind handleSubmit function again in Form component. How are Formik's onSubmit prop and Form's onSubmit prop different? Can someone please explain?
Hey Vijaykumar! Formik has a form element embedded inside of it, but they aren't explicitly connected. To allow the form's submit event to trigger Formik's submit event, you pass the `handleSubmit` function to the `onSubmit` prop of the form. This way Formik knows when the form is being submitted. It's sort of the glue that binds them together.
Hi Leigh, can you make a video for form performance improvement? Like when you use FieldArray in formik to create 1000 checkboxes. That will make the form so laggy and how to optimize that?
Hey James! Hehe, that's one insane form. To be honest I haven't experienced form performance issues before because I can't think of a time I have had to manage even 100s of fields at once. Could this form be split up?
@@leighhalliday Hi Leigh, it is an edge case, to be honest. In the form, I have a search bar for word search or for category search and it will return the search result as checkboxes that people can select. Normally it would still be around 200 options which slow down the form. I use the profiler to check what is going on and find out that whenever I click a checkbox, the form actually all will be validated or something or re-render. Hence, make the form slow down. Is there a way for me to just change the input value and not have to re-render everything? Or is it an expected behaviour of Formik?
Hey Mauricio, are you talking about just updating the value of a field? If so, you aren't changing the initial value at this point, you're just changing the current value. You can change the form values imperatively by calling this function yourself based on another event occurring: jaredpalmer.com/formik/docs/api/formik#setfieldvalue-field-string-value-any-shouldvalidate-boolean-void
Good morning, I have been having an issue in getting Data out of Formik and Material UI inputs, the Formik onchange method despite being good at validating with Yup, but it doesnt update input data I get by console log.
Hey, Is it possible to use Yup, or any react validator for a Form. Without using Formik. I prefer managing my local state with useState. How can I do it?
Hey! Yea, definitely... you're definitely asking for some work, but prior to saving the state, you probably also want to run it through Yup validations and keep track of the "errors" for your form at any point... basically re-implementing what Formik takes care for you!
@@leighhalliday So Leigh, you strong recommend me to use Formik :( , so far My Form state was really good and easy with a useState, I believe that Formik is redoing what is already done, which is taking the state of the Form. that's why I ask if I can implement only Yup
Good video, I am running into an issue though. I used withFormik to connect my component to formik. I’m withFormik I have a handleSubmit: (vale’s, props) => { props.getFormValues(values)} when I submit it doesn’t crash doesn’t show errors nothing. Having a callback is breaking the form. Any ideas?
Hey there! Formik provides you with a `submitForm` function formik.org/docs/api/formik#submitform---promise that you can pass down to a child component. It'd look soooomething like this: {({submitForm}) => ( submitForm()} /> )} So child can call the `submit` function which will trigger form submission.
Hey Shubham! Maybe do something like this rather than `handleChange` as is used in the video: event => { somethingCustom(event); handleChange(event); }
I want the button to be disabled by default until the inputs are validated, so the user can't press it when there is no data or errors, how do i do that?
There are 3 values you can use I believe... `values`, which contains all the data your user has entered, `touched`, which tells you which fields have been touched (focus + blurred), and `isSubmitting`, which is a boolean for whether the form is currently submitting. I think you may want to create a little function like `canSubmit` which looks at these 3 variables and ensures there is data, a field has been touched, and you aren't currently submitting.
Hey Oussama! In this article I go into a bit more detail about that showing how to use Formik together with Google Autosuggest... read through this and let me know if it helps clarify: www.telerik.com/blogs/forms-in-react
I have a custom component: Could you guide me how can autofocus next field upon pressing enter as in your tutorial. Currently if I press enter, submit button is invoked and since other fields are empty, i see the validation error for each field? const PortInput = ({ onKeyUp, innerRef, onChange, type, field, // { name, value, onChange, onBlur } form: { touched, errors }, // also values, setXXXX, handleXXXX, dirty, isValid, status, etc. ...rest }) => { return ( {field.name.toUpperCase()} {touched[field.name] && errors[field.name] && ( {errors[field.name]} )} ); };
Hey velie! Normally in a form I think of enter as a shortcut to submit the form, not something that will take me to the next field... that's what I use tab for. I would stick with standard browser functionality which already does this rather than trying to change behaviour.
Don't need to learn everything... just build stuff! What you choose to build it in doesn't matter to the user. For everything you know in tech, there's 10 things you don't... something you just have to forget about.
@@leighhalliday this honestly changed my perspective and made me realize my worth as a dev right now. been studying a year. i took a course on treehouse then moved over to udemy and took a JS vanilla IN DEPTH course from 2020 thats went through JS, express, node, and npm stuff really well.. i recently moved on to react... my initial plans were to be a frond developer and i still have yet to apply to jobs as i am halfway through learning react. but i guess what im wondering is u think at this point i should just really aim to become a MERN stack developer? i dont want my skills to be wasted and often i feel like since i learned react im not utilizing my backend knowledge or really a lot of my vanilla js skills in the same way or atleast as much as i would like to.... whats your experience? ive just finally started building my own big projects and its been about a year since i start picking up coding. if you have any thoughts let me know... would love some more advice and guidance because that comment really helped me realize the product is what matters not all the new crazes in tech.
Hey Bob! Hmm, well, I think maybe as you build React websites, you could also build the backend for them, so you can develop both of those skills at once. It's probably better to focus on one or the other, but being a fullstack developer is great too! My suggestion was more against learning 15 backend frameworks... go deep on one of them and build actual projects with them. If you were to build 4 high quality fullstack apps, deploy them, have a good README explaining what they do, test them, and highlight them in your portfolio, this is all you need. You don't need 500 examples of React stuff you've built.
I learn both React and Vue. Vue kinda abstracts away the problems of data flow with forms. On the other hand, React makes us understand the dataflow of form. It actually comes down to preferences.
I am a novice in Formik, your detailed video on how things work really gave me a good starting point. Thanks.
Excellent!! Glad it could help :) Thanks for saying hi!
Hey, You have really decent tutorials on this channel! I am pretty sure that you will have much more subs in the near future! Just keep going :)
Thank you! I would have taken half-decent, but fully decent is great news :D
Thank you for this awesome video... It's my first time learning Formik and you explained it clearly :)
You're my favorite react tutorial channel! thanks a lot
Thank you Anthony!! :) Glad you're enjoying the content!
Wonderful tutorial, crisp pace, clearly understanding the contents, well presented with clear explanations. Glad to have come across this video. Keep up the good work!
Thank you, Hari! I plan to keep producing tutorials... stay tuned!
@@leighhalliday Hey...Can you do tutorials on react native as well if you can... Will be really helpful for many...🥴😁
Thanks for the video! This seriously helped me out since I was stumped on this topic despite trying to google around for particular documentation for a few hours. Love the verbal detail!
Nice!! That makes me feel good :D Glad you enjoyed it!
Ohoho. Thank you, Leigh! This is exactly what I need for my project.
Last time, I did all of that basically all by myself, because I was repairing old app that used Polymer 0.8, which does not use npm.
I wouldn't say it takes so much code to write this. But with 6 fields, validations, blurring, touching, submitting, resetting... It does.
Yea for sure... it seems easy, then you're 300 lines into your form thinking shoot, I should have used Formik.
Great tutorial! Thank you Leigh , the way that you went over made it so easy to understand!
Nice! Thank you, Cibelle! Would love to have you subscribe. Any topics you'd like to see covered?
@@leighhalliday React Hooks would de nice!
Thank you so much for helping me out with the formic. I am a complete beginner to react and I understood everything. You are an awesome teacher.
Nice! I'm glad I was able to help :) Thanks for watching and saying hi!
Thanks alot for the detailed explanation .It has helped me immensely in my current project:) keep it up
Thanks Shane!! I won't let you down!
Thank you for the very clear and step by step explanation!
Thank you Majed! Glad you enjoyed it. Formik is pretty cool eh?
Super neat and straightforward tutorial on Formik. It does help! Thank you Leigh.
Would be great if you could make a video on image-uploading using Formik and Yup.
Hey Justin! Great idea about image uploading... maybe a "straight to S3 upload" as well would be cool. I've added it to my list!
a great video thanks Leigh. Will be trying it out ASAP
Awesome, thank you Philip!!
Nice work there, very clear explanation.
Thank you sz Tz :)
Thank you!
You saved from desperation over forms and moving forward in my project!
Great presentation too!
Thank you Reporter553!! Glad you enjoyed it :)
Thank you for sharing your knowledge in a very clear manner!
Thank you for replying in a very kind manner :D
Great tutorial about Formik, thanks dude you nailed it ! Liked and subscribed !
Thank you Hugo!!
Really really appreciate, clear explanations, please consider complex use cases, thanks again
Hey Shaho! I've heard from a couple people to cover forms with plurals... like an array of field combos for adding multiples of something, multi-step forms, and conditionally rendering/validating fields (Canada == Postal Code, USA == Zip Code). All in the works!
Thank you! This got me going quickly on a huge dynamic form!
Nice! Glad the video could help, thanks for saying hi Matthew!
Nice explanation about Formik and Yup, thank you. Please make a video with React Native on Formik.
Hey Ajay! I haven't worked much with React Native yet... I should get more into it eh? I just love the web so much :D Can deploy updates without needing blessings from Google or Apple.
Such an educational video, thank you!
Thanks Arasto, would love to have you subscribe, more videos on the way :)
thanks for the video! I was having trouble finding a good into video on Formik until yours!
Thanks Aeon! Happy to help!
amazing video for beginners! thanks a lot.
now I can handle forms much easier and faster.
Awesome!! Glad the video could help :)
Good video and also i've seen that've introduced Formik that is great! But please try final-form -> react-final-form, we're using it in production and it's just ideal form library!
Good examples on Formik!! Cheers!
Thanks, Justin!! Happy they helped!
You have done great Job Leigh, this is really helped, awesome, keep it up
Thank you Asad! Happy I could help!
Very clear explanations. Thanks
Thank you very much, Son!
thank u
i was having trouble finding a good kick start in Formik and Yup till i find your video
Sweet! Thanks for watching, Nagwan! Glad it was able to help :)
Simple and Informatics . tutorial should be like dis. appreciated the way you represent your code. actually i like your almost all topics....
Thank you very much, Dhirendra! Glad you enjoy the vids :)
Great tutorial. Appreciate it.
Thank you! Glad you enjoyed it!
it really helped me to get started with formik .u r a gem.
Haha thanks ... Happy to be a gem! Especially since I work with Ruby.
Thanks for sharing and alternative error message display could be using which is Formik built-in API,
Beautiful! Didn't even know that existed :D
Your explanations were clear, methodical, and easy to follow thanks for that!
As somebody that’s new to HTML/JS would you suggest that I learn the old school method of creating forms before starting to use Formik? Manually learning how to handle all these features like error validation, etc.?
Or is it generally accepted to just start using all these frameworks to offload the learning curve?
Thanks again.
Hey there! Thank you :) Honestly, use whatever works for you... if you can ship stuff quickly and learn the details later, go for it. If you prefer to learn the details first, go for it!
Thank you for such a great explanation - that really helped me t grasp this topic
Sweet! Glad it could help Vlad!
Thanks dude... you save my day... keep it.
Sweet! Glad it could help :)
best formik tutorial i've found! thank you so much!
Thank you Carlos!
Great video Leigh! Here's a suggestion for a video: making forms with nested repeating fields. For example, adding multiple addresses for users. So how to do this with formik and validation of each item in the array using Yup.
Great idea Dominik! I was also thinking about doing something about conditional validation... Canadian Postal Code vs US Zip Code depending on the country you choose.
@@leighhalliday That would be very useful as well!
Great explanation, thank you for the tutorial!
Glad you enjoyed it, Kennjamin!
Great! Thanks a lot dude! Used your tutorial in project. Works perfect with next.js
Nice! Next.js is my go-to framework in React... love the routing and being able to quickly spin up some api backend routes.
@@leighhalliday unfortunately can't get how to make the mutation with GraphQL and Apollo server when submitting the sighnup form(((
Could you please make a video or explain somehow this staff?
great explanation and now I understand how to use it. Thank you so much :)
You're very welcome!! :)
Thanks, very informative
Thanks for watching, Alberto!
WOW! This was great! Formik finally makes sense to me.
Niiiice! That's awesome to hear! Thanks for sharing, Denver!
Leigh, you're awesome! Keep going
Thank you ahache888 :D Thanks for watching and leaving a comment!
Great instructor
Thank you Oussama!
Great stuff... keep it coming
Thanks, Francis! More stuff on the way soon!
Thank you Leigh. Very clear and helpful especially for beginners. Would've been great if you created a useFormik hook and use it instead of render props :)
Thanks muratas!! Good idea! I actually think v2 of Formik will come with a hook, so I'll have to do a new video when that comes out!
Great tutorial,, help me a lot, tks
Awesome!! Glad the video could help :)
Great video .
Thanks very much, Asad!
thanks for the video!!!!
Hope learning about Formik was able to kill some of the pain of dealing with vanilla forms in React :D
Thank You!
You're welcome :D Thanks for watching, LogansRun45!
Thanks man, it was useful. Subscribed ;)
Nice! Thank you Soley :)
you are so GOOD.
Haha... thank you :)
Excellent instructor, using formik how would you separate the logic of the fetch / axios from the component?
Hey Eliot! Good question. I don't think there is anything stopping you from placing this logic in another file/function, and just importing it into your component. That's probably preferred actually! Easier to test in isolation.
perfect video
Gracias, boludokid!
Unless your needs are very basic or you are very lazy, roll your own. There is some good stuff in this library, but it has some huge gaps (form-level onChange???) and the most useful part (the validation) is actually provided by yup. I spent a couple weeks with Formik before abandoning it for a 100-line version I wrote myself that met all my requirements. React plus something like yup is all you need to implement very robust web forms.
Thanks for the feedback, Raj! I personally find Formik pretty useful, but it's nice to hear your point of view!
always the best thank you Sir from PAKISTAN
Nice!! Cheers from Canada!
16:36 We are already telling what clicking a submit button should do in onSubmit prop of Formik. So then why do we need to bind handleSubmit function again in Form component.
How are Formik's onSubmit prop and Form's onSubmit prop different? Can someone please explain?
Hey Vijaykumar! Formik has a form element embedded inside of it, but they aren't explicitly connected. To allow the form's submit event to trigger Formik's submit event, you pass the `handleSubmit` function to the `onSubmit` prop of the form. This way Formik knows when the form is being submitted. It's sort of the glue that binds them together.
thanks mr leigh. :)
You're welcome!! Thanks for saying hi!
Thank you
You're very welcome Reinaldo!
Hi Leigh, can you make a video for form performance improvement? Like when you use FieldArray in formik to create 1000 checkboxes. That will make the form so laggy and how to optimize that?
Hey James! Hehe, that's one insane form. To be honest I haven't experienced form performance issues before because I can't think of a time I have had to manage even 100s of fields at once. Could this form be split up?
@@leighhalliday Hi Leigh, it is an edge case, to be honest. In the form, I have a search bar for word search or for category search and it will return the search result as checkboxes that people can select. Normally it would still be around 200 options which slow down the form. I use the profiler to check what is going on and find out that whenever I click a checkbox, the form actually all will be validated or something or re-render. Hence, make the form slow down. Is there a way for me to just change the input value and not have to re-render everything? Or is it an expected behaviour of Formik?
Hey, Thanks for sharing! can you tell us how to change the initial values when you change a drop-down or something like that? Thanks!
Hey Mauricio, are you talking about just updating the value of a field? If so, you aren't changing the initial value at this point, you're just changing the current value. You can change the form values imperatively by calling this function yourself based on another event occurring: jaredpalmer.com/formik/docs/api/formik#setfieldvalue-field-string-value-any-shouldvalidate-boolean-void
Good morning, I have been having an issue in getting Data out of Formik and Material UI inputs, the Formik onchange method despite being good at validating with Yup, but it doesnt update input data I get by console log.
Nice video
Thank you :D
Hey, Is it possible to use Yup, or any react validator for a Form. Without using Formik. I prefer managing my local state with useState.
How can I do it?
Hey! Yea, definitely... you're definitely asking for some work, but prior to saving the state, you probably also want to run it through Yup validations and keep track of the "errors" for your form at any point... basically re-implementing what Formik takes care for you!
@@leighhalliday So Leigh, you strong recommend me to use Formik :( , so far My Form state was really good and easy with a useState, I believe that Formik is redoing what is already done, which is taking the state of the Form.
that's why I ask if I can implement only Yup
Good video, I am running into an issue though. I used withFormik to connect my component to formik. I’m withFormik I have a handleSubmit: (vale’s, props) => { props.getFormValues(values)} when I submit it doesn’t crash doesn’t show errors nothing. Having a callback is breaking the form. Any ideas?
Hmmm, I'm not sure! Do you have a codepen you could share?
Leigh Halliday hey figured it out. Thanks though.
Hi! How can I submit Formik form, using button from another functional component?
Hey there! Formik provides you with a `submitForm` function formik.org/docs/api/formik#submitform---promise that you can pass down to a child component. It'd look soooomething like this:
{({submitForm}) => (
submitForm()} />
)}
So child can call the `submit` function which will trigger form submission.
I want to trigger a function as soon as I change the value of input. How do I achieve that?
Hey Shubham! Maybe do something like this rather than `handleChange` as is used in the video:
event => {
somethingCustom(event);
handleChange(event);
}
Leigh Halliday how do I pass the event? In the video when handlechange in called, no event was passed to it.
I want the button to be disabled by default until the inputs are validated, so the user can't press it when there is no data or errors, how do i do that?
There are 3 values you can use I believe... `values`, which contains all the data your user has entered, `touched`, which tells you which fields have been touched (focus + blurred), and `isSubmitting`, which is a boolean for whether the form is currently submitting. I think you may want to create a little function like `canSubmit` which looks at these 3 variables and ensures there is data, a field has been touched, and you aren't currently submitting.
I cant access values out of formik, and I find a way to do so, like link state to values its unchanged
Hey Oussama! In this article I go into a bit more detail about that showing how to use Formik together with Google Autosuggest... read through this and let me know if it helps clarify: www.telerik.com/blogs/forms-in-react
Wow
Hehe, I'll hope it's a good "wow" and not a bad one.
Good wow 🔥🔥
I have a custom component: Could you guide me how can autofocus next field upon pressing enter as in your tutorial. Currently if I press enter, submit button is invoked and since other fields are empty, i see the validation error for each field?
const PortInput = ({
onKeyUp,
innerRef,
onChange,
type,
field, // { name, value, onChange, onBlur }
form: { touched, errors }, // also values, setXXXX, handleXXXX, dirty, isValid, status, etc.
...rest
}) => {
return (
{field.name.toUpperCase()}
{touched[field.name] && errors[field.name] && (
{errors[field.name]}
)}
);
};
Hey velie! Normally in a form I think of enter as a shortcut to submit the form, not something that will take me to the next field... that's what I use tab for. I would stick with standard browser functionality which already does this rather than trying to change behaviour.
Hola, gracias, podrías hacer el mismo tutorial pero en español?
Hola Christian! Lo intentaré! Estoy planeando otro video usando forms, y ese video haré en español tambien. Saludos!
Very similar to how Angular handles forms
Check out my video on react hook form for another alternative :)
def something that by the time i learn it its old news. i spent weeks on express validator shit now i see this? FMLL
Don't need to learn everything... just build stuff! What you choose to build it in doesn't matter to the user. For everything you know in tech, there's 10 things you don't... something you just have to forget about.
@@leighhalliday true that man. thanks
@@leighhalliday this honestly changed my perspective and made me realize my worth as a dev right now. been studying a year. i took a course on treehouse then moved over to udemy and took a JS vanilla IN DEPTH course from 2020 thats went through JS, express, node, and npm stuff really well.. i recently moved on to react... my initial plans were to be a frond developer and i still have yet to apply to jobs as i am halfway through learning react. but i guess what im wondering is u think at this point i should just really aim to become a MERN stack developer? i dont want my skills to be wasted and often i feel like since i learned react im not utilizing my backend knowledge or really a lot of my vanilla js skills in the same way or atleast as much as i would like to.... whats your experience? ive just finally started building my own big projects and its been about a year since i start picking up coding. if you have any thoughts let me know... would love some more advice and guidance because that comment really helped me realize the product is what matters not all the new crazes in tech.
Hey Bob! Hmm, well, I think maybe as you build React websites, you could also build the backend for them, so you can develop both of those skills at once. It's probably better to focus on one or the other, but being a fullstack developer is great too! My suggestion was more against learning 15 backend frameworks... go deep on one of them and build actual projects with them.
If you were to build 4 high quality fullstack apps, deploy them, have a good README explaining what they do, test them, and highlight them in your portfolio, this is all you need. You don't need 500 examples of React stuff you've built.
Could you please add Form Field Array Too.. New Subscriber here!!
Hey Mithin!! Thanks for the subscribe. I'll add it to my list of things I can cover in the future :)
It's not html is JSX
Thank you for the clarification
None of React libraries can make work with forms as simple as in Angular or Vue
I learn both React and Vue. Vue kinda abstracts away the problems of data flow with forms. On the other hand, React makes us understand the dataflow of form. It actually comes down to preferences.
Angular... no thanks.
@@dominikseljan3043 Why? What you don't like about Angular? Just intersting.
@@alex_chugaev It's bloated, a lot. I like simplicity of React and Vue.