Formik: React Forms Tutorial with Yup and Material

[@BrunoAntunesPT]

Timeline: 00:00 Introduction 00:50 Building the form using formik 11:15 Style with Material-ui 26:30 Validation with Yup

[@BrunoAntunesPT]

Repository: github.com/bmvantunes/youtube-2020-jan-formik-typescript-materialui

[@oscarah317]

Thanks a lot for your videos very concise, is there any chance to know the plugins you use for Vscode? I see there's some intellisense for materialui on some of your videos and also I ser on this one a jest plugin running. Thank you.

[@BrunoAntunesPT]

Thank you very much 😍😍 in my last videos I'm using vscode with only prettier, nothing else... In my working vscode installation I'm using quite a few: prettier, eslint, debugger for chrome, jest, json2ts (huge time saver), gitlens, vscode-styled-components (it also works with emotion), npm extension, git history, code spell checker (this one is pure gold to me), peacock and lastly "import cost". That's all I have installed at the moment but keep in mind that from time to time I install and uninstall some 😅😅 I hope the list is useful 😍

[@oscarah317]

@@BrunoAntunesPT thank you, I use standardaJS I should probably gice a try to prettier, I see it order nicely the imports(I suposse that's done by prettier) I have disabled by defult the Vscode default formatter. Nice videos, I use firebase and nextjs

[@BrunoAntunesPT]

Actually the organizeImports is from vscode. If you go to options and type organizeImports you can enable that. It even removes unused imports which is awesome 😀 BTW what do you think about firebase? I have done some demos there but never used it for a big app 😅

[@Omar_Al_Seddik]

Wow. This entire channel is a hidden gem. Subscribed.

[@BrunoAntunesPT]

Thank you very much Omar 😍❤️

[@tomgoner7425]

Best Form Tutorial in KZbin

[@BrunoAntunesPT]

Thank you Tom 😅😅

[@mounatebourski8190]

Best tutorial ever about formik ! Thanks a lot. I’m a in love with your youtube channel.

[@BrunoAntunesPT]

Very happy to read your comment 🤗🤗 thank you very much 😍

[@VincentFulco]

Terrific, practical video and great teaching style and pace. Well done!

[@BrunoAntunesPT]

Thank you very much Vincent 😀 I'm glad you enjoyed it 😍

[@monicasilvestre1699]

Thanks for the detailed tutorial, now I really want to use it at work!

[@BrunoAntunesPT]

Give Formik a shot, it's amazing!!! 👍👍

[@anastasiosarvanitis9533]

Hey Bruno, thank you so much, I think that this is the best formik & material video that I ve seen!!!

[@BrunoAntunesPT]

Thank you very much Anastasios! It means a lot to me your feedback =D I hope you enjoy the other videos on the channel :)

[@kempsterrrr3793]

Smashed it with this Bruno, thanks 👍. Helped me catch a fundamental error with how I was using Formik which reduced the code I was writing by over 50%!

[@BrunoAntunesPT]

I'm so glad you found the video helpful ☺️☺️ it gives me motivation to keep going

Really good tutorial! Very easy to understand for someone who doesn’t know much of React but is used to some level of coding.

[@BrunoAntunesPT]

I'm glad you enjoyed 😊

[@mohammedkaka5558]

just came here and you are doing great bro....keep grinding

[@BrunoAntunesPT]

Thank you 😍😍

[@willifur]

Huge help and way easier than reading the docs. Thank you!

[@BrunoAntunesPT]

Great to hear William! Thank you =D

[@korany07]

A good outline and clear explanation. keep recording such tutorials

[@BrunoAntunesPT]

Thank you very much Bahadir 😊😊 I hope you enjoy the other videos on the channel ☺️☺️ in the near future I'll create another tutorial with formik, a multiple step form tutorial 😊

[@somewhereinthe90s38]

Very nice, we was trying to improve our React Forms and now we are good to go. Good image quality!

[@BrunoAntunesPT]

Awesome!!! Let me know if you have ideas for the next videos

[@titaniumwolf2]

Thanks for showing and explaining Burno!

[@BrunoAntunesPT]

Thank you Tyrone 😊 I'm glad you find it helpful

[@krullskull9093]

You are awesome teacher. Thank you.

[@BrunoAntunesPT]

Thank you very much Kusal 😀😀😃❤️

[@thecodersbay2775]

Wow! I really love your content and teaching style

[@BrunoAntunesPT]

Thank you very much 😊 it warms my heart reading such comments 😍😍

[@Tannedjb]

Very nice! I loved the content and your explanations are clear! Thank you Bruno!

[@BrunoAntunesPT]

Thank you for the support

[@OliveME1119]

Thank you so much for this tutorial. I learned a lot from it. Keep up the good work!

[@BrunoAntunesPT]

Thank you Olive =) Glad to hear that!

[@adamtak3128]

Awesome video. I'll never handle my own inputs again. Always going to be using Formik 👍

[@BrunoAntunesPT]

Thank you Adam 😊 Formik is lovely!!! 😍😍

[@jesselopez2173]

Groundbreaking for entrepreneurs!!!!

[@BrunoAntunesPT]

Thank you Jesse 😊

[@LincOnid]

Nice example. Great Job !!

[@BrunoAntunesPT]

Thanks Michael.

[@vidumini23]

Thank you so much. I learned a lot..

[@BrunoAntunesPT]

Thank you my friend 😀😀

[@bilionievgen]

Formik: React Forms Tutorial with Yup and Material

[@BrunoAntunesPT]

This is very good for the KZbin algorithm =D Thank you very very much my friend!!!

[@sarafarokhi59]

So nice, thank you Bruno

[@umer4465]

Nice Man!! Good effort, keep it up

[@BrunoAntunesPT]

Thanks Umer!

[@Underlineoff]

You are so clear, what a bless ! Thank you :)

[@BrunoAntunesPT]

Thank you Romain :) I'm really glad you enjoyed the video :)

[@cafafans]

Thank you so much; you are awesome!

[@BrunoAntunesPT]

That's sooo good to hear 😁 I'm happy to announce that tomorrow (3pm London time) we will have another video about formik. The video will be about how to create a multiple step forms using formik 😀😀😀

[@perenciolo659]

Great job thank you for this helpful tutorial

[@BrunoAntunesPT]

Thank you Gustavo! I'm glad you found this one helpful 😊

[@nuttchokwittaya8225]

Thank you so much Bruno

[@BrunoAntunesPT]

Thank you Nutt 😊

[@yaelporat6663]

Perfect tutorial! thank you!

[@BrunoAntunesPT]

Glad it was helpful! =D

[@tarekmedhat6222]

Perfect tutorial , thank you

[@BrunoAntunesPT]

Thank you Tarek 😃

Great. Nice tutorial. keep going.

[@BrunoAntunesPT]

Thanks Fábio!!!

[@miguelcoelho6641]

Amazing video!!

[@miguelcoelho6641]

Do you always use Formik to this type of components in your projects?

[@BrunoAntunesPT]

Thank you Miguel 😊 Some projects I use Formik, others I use react-hook-form. I personally feel that Formik is easier than react-hook-form for complex forms, but, you can very easily find a ton of people that thinks the opposite 😂 In the end of the day, the most important thing is that you and your team are productive. The tool itself, it's just that, a tool! 😊

[@miguelcoelho6641]

@@BrunoAntunesPT thank you 🙏🏼

[@miguelcoelho6641]

i have a problem in the end of the video with res() in setTimeout(): (parameter) res: (value: any) => void Expected 1 arguments, but got 0. Did you forget to include 'void' in your type argument to 'Promise'?ts(2794) lib.es2015.promise.d.ts(33, 34): An argument for 'value' was not provided. but the program works just fine

[@BrunoAntunesPT]

You mean on this line of code? github.com/bmvantunes/youtube-2020-jan-formik-typescript-materialui/blob/1c462bbf213aad94346ab28cb74cacda5a4cc987/src/FormDemo.tsx#L38 If the answer is yes, just add a to Promise like this and it will not complain anymore 😊 ``` return new Promise(res => { setTimeout(() => { console.log(values); console.log(formikHelpers); console.log('---------'); res(); }, 5000); }) ``` Let me know if it fixed it for you 😊

[@attamjotsinghkhurana4473]

Beautiful and best explanation on formik . Eill be great if you can make video series on Redux saga

[@BrunoAntunesPT]

Thank you very much 😊😊 I stopped using redux for about a year now 😁

[@attamjotsinghkhurana4473]

@@BrunoAntunesPT so what is your technology stack now . And also i have a doubt I.e how to efficiently connect your form data with Redux... if you can tell ? Or should I use redux form for it then formik

[@BrunoAntunesPT]

I never felt the need to connect any form data with redux - even when I was using redux on a daily basis. The form data is local data to the component, when you submit the form, you put the data into the action payload and dispatch the action. If your use case for redux is mostly to cache your HTTP calls and communication with the server, you'll find SWR an amazing piece of software =) We have a video on the channel about SWR: kzbin.info/www/bejne/l2itmpqfgdyShbs If you end up watching that video, let me know what you think about SWR =) Personally, I'm in love with SWR.

[@attamjotsinghkhurana4473]

@@BrunoAntunesPT it is fabulous, but can we directly use with react as I am stranger for next.js world. Hahaha

[@attamjotsinghkhurana4473]

Bruno will be great if you can create a playlist on swr with react . Thanks

[@sergiob3698]

Hi Bruno, working on forms not sure to take this approach or use react-hook-form. What do you suggest? What should take into account? BTW I miss your awesome videos. Long time no see!

[@BrunoAntunesPT]

Hello Hello Sergio, Very true, long time no see!!!! I have been unable to record videos for KZbin, because my job has been a bit overwhelming in terms of workload. After work the last thing my brain wants is to look into code again to record videos, I'm sorry :( I'm confident it will improve soon my friend. I'll be back soon on KZbin very soon, I promise =) Before I give you my opinion/advice I have to warn you, that I have been using formik for a very long time, so my brain is 100% biased and I want you to know that, so you receive my comments with a grain of salt =D Regarding Formik vs react hook form, I feel react hook form is a bit easier when we have simple forms. Every time I have a very complex forms, with dependent fields, and fields updating other fields, my brain still finds Formik easier to reason about. This might be because I'm using Formik for sooooo long... The best (and non-biased) advice I can give you, is to do 2 small demos with both Formik and React Hook Form, and decide for yourself. The truth is, you'll be good with both libraries, but we as developers will always have preferences =D I hope somehow I was able to help you =D One day I might even do a video about react hook form =D PS - I might even do a video very similar to this one, so people can have a look into both libraries solving exactly the same problem =D

[@sergiob3698]

@@BrunoAntunesPT thank you very much for you quick and detailed response. I saw some samples but in general are simpler than the one you showed here. Hence, it's looks like one more time you are right. Thanks for the disclaimer anyways! Sounds we won't have a new video soon so just in case... happy holidays Bruno!

[@BrunoAntunesPT]

You'll be very happy with react form hook as well 😀 I was able to record a new video yesterday - now the question is knowing if I'll have time during the weekend or only Monday evening to edit the video 😅😅😅 That means, we will have one last video this year 😀😀 I wish you a very good holiday season my friend 😍😍

[@sergiob3698]

@@BrunoAntunesPT thank you awesome!

[@vittoriomorellini1939]

Hi Bruno, very interesting your channel. Typescript + React. there are few channel so complete

[@BrunoAntunesPT]

Thank you very much Vittorio 😀 Any specific video you would like to see a video about? 😉

[@vittoriomorellini1939]

@@BrunoAntunesPT i follow you. I'm changing job. At the 1 october i will start in new company with react + typescript on Front end. I 'm studing now because i use now angular8 + typescript. React is more complicated. It seems to me less ordered than angular

[@vittoriomorellini1939]

@@BrunoAntunesPT i like formik + material ui. It's perfect for me now

[@BrunoAntunesPT]

At the beginning is a bit confusing having all the "html" inside js. It made me feel confused at the beginning. Today I don't know if I want to go back 😅 BTW during the weekend I will record the first episode of a react series with typescript. The first episode I'm still thinking if it should be immediately typescript or first JavaScript and then in the next episodes typescript like I did in the nextjs series 🤔🤔🤔🤔 But one way or another I will record the first one sometime during the weekend 😀

[@vittoriomorellini1939]

@@BrunoAntunesPT also in react a developer can organize tsx for layout and ts for logic. It depends how A developer prefers

[@LucianoSoares85]

Very helpfull. It is exatcly what I was looking for. Thanks. Are you brazilian? Your name sounds like a brazilian name.

[@BrunoAntunesPT]

Obrigado 😂😂 Fico muito feliz por saber que o vídeo foi útil 😁😁 Eu sou português de Lisboa a viver em Londres. Tu és de que cidade no Brazil? 😍

[@LucianoSoares85]

@@BrunoAntunesPT Interior do estado de Minas Gerais. Pirapora a cidade.

[@BrunoAntunesPT]

@@LucianoSoares85 um dia tenho de ir ao Brasil 😁

[@LucianoSoares85]

@@BrunoAntunesPT tem sim. Vai adorar. Será muito bem vindo.

[@BrunoAntunesPT]

Os meus amigos brasileiros dizem que não está muito seguro em cidades como o Rio de Janeiro. É verdade?

[@thenotagoodprogrammer]

amazing tutorial love it, just one thing how can i add material ui error property so the input would be red?

[@thenotagoodprogrammer]

never mind i just added error={ errors.fullname } to the field component and it works great. . Thank you very much

[@BrunoAntunesPT]

Thank you very much Mansor 😍😍 I'm happy you were able to make it work 😊😊

[@ImDeesu]

40:26 almost died here xD

[@BrunoAntunesPT]

😂😂😂 I'm sorry, I'm sorry 🤣🤣 at the time I didn't knew how to edit video and now KZbin doesn't allow me to change it. This was my first video ever 😅😅😅

[@ImDeesu]

@@BrunoAntunesPT still great job, everything is clear to me now! :D

[@BrunoAntunesPT]

That's awesome. Thank you 😀😀 In future I'll create one with multiple step forms, I think it can be helpful. Once again sorry for that scary moment at 40:26 😅😅😅

[@Nodirbekjumaboyev1977]

thanks

[@BrunoAntunesPT]

Thank you very much ❤️❤️❤️

[@bouamarelouahhabi9525]

Better than Jared Palmer 's explanation in React Alicante

[@BrunoAntunesPT]

Thank you very much my friend. Being compared with someone I admire like Jared is an honour!!! He is amazing =D PS - Don't forget that it's much harder to speak in front of people than on the safety of my house with nobody around. In a live show you only have one shot, which puts a lot of pressure on the speaker =)

[@abcool0801]

Hello bruno, i dint understand the part where you used useField and destructure it as only field, is it a way of using custom hooks? Coz there should be a setField too for chamging the value of field . And the second thing is while using dropdown with formik can i combine it with something from by backend like some kind of categories and fetch it from backend eg node.

[@BrunoAntunesPT]

I don't know if I fully understood your first question. I'll try to answer taking into account what I understood =) Feel free to correct me if I understood badly your question: In the video I only needed the field itself, if you need to set the value of the field programatically, you can do: ``` const [field, meta, helpers] = useField(props); // somewhere else in code: helpers.setValue('new value')". ``` UseField is a custom hook provided by formik. We have access to field, meta and helpers. Inside helpers you have a setValue in case you need it =) Did I answer your question? Regarding your second question, absolutely! You can fetch your options and show in a dropdown. If you see the Car Trader App series on the channel we are actually doing that (video 3 and 4) with the makes and model dependent dropdowns =) Car Trader Series Playlist: kzbin.info/aero/PLYSZyzpwBEWTt-0uuxAcSrJmMlnD9Yuz3

[@abcool0801]

@@BrunoAntunesPT thank you bruno for clearing my doubts. Have a good day.

[@BrunoAntunesPT]

You too 😀 enjoy the weekend ♥️

[@jitengudhka4000]

Hey Bruno thanks for the video. when using formik with large form there is performance issue , how i can improve performance?

[@BrunoAntunesPT]

Thank you 😍 Well, it really depends what you are doing. Are you doing something special in your forms?

[@jitengudhka4000]

@@BrunoAntunesPT The form contains 15 field and there is an add button on clicking new category is created which contains new 15 fields so when making change on any input field the changes is taking too much tym on UI to reflect

[@BrunoAntunesPT]

After how many fields does your form becomes slow? You can give a try to: formik.org/docs/api/fastfield The formik creator in a past a GitHub issue (2018) said: "formik is really not designed to be performant on forms with that many fields or spreadsheet-like UI". The person he is responding to said they had 1206 fields in a form. The url to that issue: github.com/formium/formik/issues/671#issuecomment-524914506

[@BrunoAntunesPT]

Actually 2019 not 2018 =D

[@jitengudhka4000]

Thanx Bruno I will check that, Thanx 4 quick reply ❤️

[@joaomendoncayt]

Hi! Good job, and great video! I'm with a tiny annoying problem here. First time using formik + mui, and whenever I write something on my "TextField" the value is not updated on "values" of formik Form... I'm using a component and passing both "name" and "as" properties and it's not working, I have also used useField() hook on my Custom component that I'm passing on but it still doesn't update the value on values. Can someone try to help me here?

[@BrunoAntunesPT]

Ola' Joao :) Thank you =D Do you have a github repository or a codesandbox with your code? It's much easier that way =D PS - If you want you can use "a new" package called formik-material-ui, which makes your life much much easier, it even includes validation colors out of the box =D

[@joaomendoncayt]

@@BrunoAntunesPT Depois de uma tarde inteira, consegui resolver o problema. Basicamente estava a usar um componente na prop "as" do do formik que não era um componente do MUI, mas sim um componente feito por mim que por sua vez renderizava um componente do MUI lá dentro. (confuso explicado numa mensagem, eu sei) Resultado: O do MUI não recebia as props do render do e tive de fazer um workaround. Não conhecia a formik-material-ui, vou já dar uma vista de olhos! Obrigado! Continuação de um bom trabalho :D

[@BrunoAntunesPT]

Ahhh sim... nesse caso tens de passar o onChange e o value para o textfield do material 😊 ou então fazer um custom filed como eu fiz as checkbox neste vídeo 😊 O formik-material-ui é excelente mesmo, um grande Time saviour 😉 NO meu último vídeo estou a usar, se quiseres dá uma vista de olhos assim na diagonal no git repo 😉 fica mesmo muito fácil de usar Depois diz que se gostaste de usar 😀

[@norkss1]

Ты крутой мужик)

[@BrunoAntunesPT]

I don't speak Russian, but google translate says "You are a tough guy)" Thank you =D

[@norkss1]

@@BrunoAntunesPT I will also use Google translate because I don't understand English at the proper level I did not find videos where they also showed well how to work with the Formik in russian language, and your video helped me and my friends to understand Formik a lot. Thank you and good luck:)

[@BrunoAntunesPT]

@@norkss1 If I knew Russian I would make videos in Russian to help, but sadly I don't know any Russian :( In my last video (xss attacks) I added English Subtitles to KZbin, so hopefully KZbin can make a better work with the auto-translations to other languages on the subtitles =D

[@deepika.g7999]

Sir how to style the yup error message ?

[@BrunoAntunesPT]

Hello Deepika, You have multiple ways, but probably the easiest one is: {msg => {msg}} What you put inside ErrorMessage component can be styled anyway you want :) You can read more about ErrorMessage at: jaredpalmer.com/formik/docs/api/errormessage I hope this is helpful :)

[@kiliusz]

Nice, if u spend more time on youtube search u will find gems like this :)

[@BrunoAntunesPT]

Thank you 😁😁😁 I'm soo glad you enjoyed this video. It was my first ever video on KZbin 😁😁

[@bernardamofah4524]

Hi, in regards to the validationSchema bit, how would that work with errors coming from the an api... for example the api returning a response body like { "errors": [ {"fullName": "An account with this name already exists. Would you like to login....?" ] } as the error matches the initial value can one use that.....

[@BrunoAntunesPT]

Hello Bernard :) What you want to do is called "async validation". You can achieve it in one of two ways: 1. You can do it on yup using "test" returning a promise 2. In formik use validation returning a promise. If you do one of those 2 you should be good.

[@bernardamofah4524]

@@BrunoAntunesPT you demonstrated yup so well that will google the yup test promise bit. Should be fun trying to do that with next. Once again for the quick reply. This is all a react/nextjs crash course.

[@BrunoAntunesPT]

Sorry I forgot to add the URL for their docs, completely my bad: Yup docs: github.com/jquense/yup You'll be looking to do something like this: /////////// let asyncJimmySchema = string().test( 'is-jimmy', '${path} is not Jimmy', async (value) => (await fetch('/your-api/validate-my-field/' + value)).responseText === 'true', }); //////////// Something on those lines :) PS - Probably KZbin will destroy the formatting of my code xD

[@BrunoAntunesPT]

The third parameter is the one you'll care about (the http call to validate your field based on your API validation endpoint - before the real submit)

[@bernardamofah4524]

@@BrunoAntunesPT oh wow. sorry just seen this. will check it out. I tend to go for the super complicated stuff... Read somewhere that when doing the test bit with api calls it would execute it when the field as been touched. would have thought it possible to only do that part of the validation on submitting the form

[@sayyamabbasi1839]

can't we do simply with a JS template?? or Typescript is mandatory to handle formik and yup?

[@BrunoAntunesPT]

It's perfectly doable in JavaScript 😊 I prefer typescript, but you can achieve exactly the same result by using pure JavaScript 😊

[@bernardamofah4524]

has anyone come across this before Warning: Formik context is undefined, please verify you are calling useFormikContext() as child of a component. TypeError: formik.getFieldProps is not a function

[@BrunoAntunesPT]

By that message I can't help you :) If you have your code in a github repo that I can clone, I can try to have a look tonight :)

[@bernardamofah4524]

@@BrunoAntunesPT github.com/bamofah/multi-step-signup here is the repo. its an attempt to create a multi-step form

[@bernardamofah4524]

any help would be vary much appreciated. As you will see have taken a few examples from various examples (so its all over the place....)

[@BrunoAntunesPT]

Tonight I will have a look into it 😊 in London is now 10:39. When I finish my workday I will have a look into it 😉 where are you located? If the timezone difference is not too big we can even do a Skype call or something similar 😉😉😉😉

[@bernardamofah4524]

@@BrunoAntunesPT am located in the uk so yeah a skype would be ace. would pre-warn ya. I got like a million questions lined up. The comment sections wouldn't be able to handle the amount of questions I got

[@michaelscofield2469]

please come back to youtube

[@BrunoAntunesPT]

Sadly at the moment I've been busy with lots of other things and KZbin has been in the back seat. I plan to one day come back, I just don't know when I'll be back =)

[@michaelscofield2469]

@@BrunoAntunesPT Hi Bruno, I hope you will have free time soon. Remember that we are waiting for you

[@andrii_kyslov]

A brilliant tutorial, but there is a screamer at 40:24 😸

[@BrunoAntunesPT]

Ahahah sorry, this was my first ever KZbin video 😅

[@andrii_kyslov]

@@BrunoAntunesPT hope to see new videos from you☺

[@BrunoAntunesPT]

Hopefully by month end or start of next month 🙂 for now I'm in detox mode 😂 sometimes it's healthy to stop to avoid burnout 🙂

[@andrii_kyslov]

@@BrunoAntunesPT so wish you a very good rest and we're all looking forward to new videos🙌

[@brandonmarcos9619]

this implementation does not work for react native/expo ?

[@BrunoAntunesPT]

I have never used React Native, so I don't know the answer, but I'm curious to know the answer 🤔🤔

[@brandonmarcos9619]

@@BrunoAntunesPT Many thanks for the reply

[@vittoriomorellini1939]

I follow your tutorial because of typescript and Material UI. I don't understand who use React with simple javascript, how can they do ??? If you want develop serious software you need TS, absolutely

[@BrunoAntunesPT]

I love typescript 😍 That being said I know lots of amazing JavaScript devs that don't like or use TS and build amazing apps 😊

[@vittoriomorellini1939]

@@BrunoAntunesPT they are good. Js is good but Ts is better. More difficult but better