React Multi Step Form With Formik + Yup - React Tutorial

[@aprishytanayak1447]

One of the easiest tutorials out there!

[@AtomiCoding]

Only this video Helped me for multi step form thanks bro you rock and it was great to learn things in right way

[@jobaowori9235]

Really great video. Got everything I needed for my project

[@jyotiogennavar9134]

Thanks for this amazing tutorial. It was so easy to follow and understand.

[@shikharmishra5700]

bro can you provide me this code please!!!!!! sanbox link is not working anymore

[@danielaestrada1362]

Thank you! The easiest solution I've found

[@joseluisolivar7048]

Thank you a lot, this video is really amazing and useful.

[@hamzamx6998]

clean and clear, awesome

[@Lorthiz]

The Frontend King is back! Glad to see you are all right. :)

[@letscode7478]

Thank you!

[@Lorthiz]

​@@letscode7478 Watched it and I must say... It's really clever. I will for sure have it in the back of my mind when working on complex forms again. They don't even need to be 'multi-step' it looks just like a great way to slice big forms to simler, easier to debug/work with chunks and most importantly the validation is segmented too. I tried doing something similar in my project but this video was not up so I just ended up creating my simpler miniforms that were not wrapped inside their own Formik tag but just received 'name' prop and resolved their place in the form based on that. Throw a few useField( ) hooks and you also have small reusable chunks... One thing I can say that is not soo cool about this approch is that validation as in the end it's just a big Yup object at the top of the Formik Food Chain(even if using helper methods like: createMiniformXYZvalidation()) :) From the other topics do you think you could meaby create something more 'css' heavy/packed? Or meaby not packed but like 'good practices for complex css' or working with some css libraries? It would be great to see you opinion/how you approach it. If I asked for this before then sorry, I could have forgot! But I digress. Great material, Thank you! :)

[@letscode7478]

Thanks for watching, I agree with you about the validation just being a big yup object but there isnt much you can do about that unless you create your own custom validator that's simpler. I prefer not to make videos about css. Most of the time if your working on a project you will not be using any css library unless it was specifically asked for. And there are so many ways to handle the same thing in css that it honestly just becomes a matter of preference. If your working at a company you dont really get a choice in how you handle css, there will already be a standard way that the company has came up with and you will have to follow that standard. Its also different if your using styled components or your using css. Everything from folder structure to how responsive design is handled differ from project to project and company to company. There is also the issue of using fluid layouts vs more fixed layouts with query selectors which once again comes down to preference and company standards.

[@codellyson]

You are the best, subscribed.

[@hiddenmistake]

thanks again bro !!!💖💖

[@57509882mda]

Great video seriously

[@szangyi24]

So amazing! This is exactly what I was looking for! The sandbox is not found though. Can you correct the link?

[@codecast8713]

Can you do this with react hook form instead of Formik? Idk why everyone is doing the Yup and MUI stepper form with Formik only.

[@АлександрПлетнев-ь5ь]

thanks bro, you helped me a lot!

[@letscode7478]

No problem!

[@ankitmehrotra8519]

SSR with react wud be cool.. If possible using redux along

[@harshamv5113]

Can we split this into multiple Pages? also any suggestions on how we can also add an indicator?

[@RohitYadav-eq4dc]

How persist data when user click on browser back button or any button on the page

[@nooralalem6099]

The best!! Thank you.

[@KhourySmith]

I would to see how to show api errors on the front. ie this user already exists

[@salarkamjoo3669]

very helpful video thanks

[@ViacheslavLopatynskyi]

The link to the code isn't working. sandbox not found

[@NatteRoll]

the link of the project is broken

[@dgcp354]

man of his word, can you do react-hook-form too

[@letscode7478]

I just looked at the react-hook-form website and its very similar to formik. I prefer formik to most other packages that handle forms. I like how formik lets you create custom components that automatically hook into formik and make it really nice and fast to create new forms.

[@dgcp354]

@@letscode7478 it doesn't re-render much tho, that's the advantage over formik,

[@letscode7478]

That's defiantly nice, but its not really needed. React is very performant, and optimising to reduce the number of re-renders often doesn't give any noticeable improvements. The big areas I see where you should focus on performance is for anything that includes large amounts of data needing to be re-rendered such as a graph with lots of data points, and any computationally expensive calculations. A standard form, or even a very large form with lots of re-renders isn't a issue at all. If you're currently using react-hook-form I defiantly suggest checking out formik, once you get a good understand of its basics you will love how nice and easy it is to create forms with it.

[@hiddenmistake]

Thanks a lot 👍

[@chandrashekharmeshram6597]

Sandbox not found. please add git hub repo

[@sachinaasuri]

Any plans on testing part of react?

[@letscode7478]

I might create some videos on testing but honestly I'm not too experienced in testing myself, only been doing it for a few weeks now and I think if I created a video about testing it might have some bad practices and I don't feel confident in it yet.

[@includejoe]

thanks man!

[@ntrpause]

13:25

[@DeepakGupta-pz4fx]

Please make on video Redux tutorial

[@letscode7478]

I already have 4 videos on redux: Redux + Hooks - kzbin.info/www/bejne/qJSylIyapN9rpZo Redux + Thunk - kzbin.info/www/bejne/i6SvZWmArKeNrc0 Redux + Typescript - kzbin.info/www/bejne/gpzRmGpuhrOKgKM Redux + React Router - kzbin.info/www/bejne/fZOkdoGsp6yVetE

[@MightyKingKala]

thank you

[@phdiniiz]

Codesandbox is dead :(

[@arupde6320]

r u alive ??

[@letscode7478]

I am alive, but don't plan on making more videos.

[@jeromegee]

Yer mah Hero! \ [^_^] /