React & Material UI #28: MUI Forms + Formik

In this video we go over:
- What is Formik and how does it work with MUI?
- Why Formik for Material UI Forms?
- How does Formik integrate with MUI
- What information they cover on their docs
- Code sandbox showing how Formik is structured and all the examples
- Formik with Datepickers, forms, toggles, and buttons
- Formik Validation, default states, render functions, and submit functions
Formik Codesandbox: codesandbox.io...
Formik Documentation: stackworx.gith...
Formik Github: github.com/sta...
MUI TextField documentation: material-ui.co...
The Forge Coding Tutorials...theforge.ca
Follow me on Social Media:
/ asistilli
/ anthonysistilli
/ asistilli

[@siri3359]

I would just want to learn all TECH stacks from you.. You are a saviour !!! I am so glad I found your channel... Commenting for better reach.. Please just maintain the same explanation style and pace.. Thanks a lot!!

[@danijelbrankovic3158]

It was me ask for this tutorial. So thx bro. And yeah , some react updated crash course will be awesome.

[@AnthonySistilli]

Thank you for the suggestion!! :D

[@johnbentley5608]

Your Material UI videos have been so, so helpful! I love the format of your videos, you have a great way of distilling the main points down into an easy-to-understand way. I can't wait to start using Formik with Material-UI!

[@ABsazerNer]

I hated react because of its difficulty of form validation, but you made me change my opinion by this library, thank you so much

[@punitpanda8568]

hello!! the way you explain things is very nice and easy to understand. loved it!!!

[@jaychandran24]

Thank you Anthony for the great videos! The whole series has been exceptional and your teaching is wonderful! Can you please do a in-depth video on React Hooks, React Context APIs, Reducers...

[@bogdangrbatinic5451]

Thanks for the video. 1 suggestion for next video in the series: customising form inputs besides using `TextField` component and optionally wiring those customised inputs with Formik.

[@UsmanKM]

Thank you so much for this. Please also give tutorial on react-hook-form

[@Jay-jo5dm]

anthony, i've smashed that like button

[@k8hansen]

...and here I am again, peeping another one of your videos! Thank you so much for your content and clear explanations. P.s. is this video super blurry for anyone else? I can't really read the code. I'm watching on a 4k monitor :/

[@siddi117]

You should also integrate with an up and coming library called react-hook-form it’s super similar!

[@pannihto7588]

I'm using react-hook-form on my projects and it's super easy to integrate with Material UI. I'd suggest you to try it in case you haven't

[@ruqayyahsara222]

Hi. I loved your Material UI videos. They are being so helpful to me right now. Would you be please kind to show a tutorial using Material UI in a PWA and how to do the Links and Routing in a PWA. THANK YOU!

[@marynavatsko9692]

You are talented at explaining things! Is there a chance you consider making a git tutorial? Like, how to solve conflicts, when to stash things, how to rename a folder already tracked by git, etc. I've joined a project recently and using git turned out to be a challenge..

[@mahendranath2504]

Just now I came accross you channel , great content, I subscribed and hit notification, for next video can you do multi step form validation, and also can you do advance stuff ,not counter in react toolkit , 👍🏼🙏

[@aravindk8181]

awesome this really helped me in building a form

[@diyarpolat9823]

Anthony, you are the man

[@anastasiosarvanitis9533]

Great video Anthony thank you so much!

[@naveenraj061]

Its very much helpful buddy

[@joshuafoxworth6972]

I found the sandbox in question to be out of sync with the docs. There is no explanation as to why some things come from formik-material-ui and others come from material-ui/core.

[@wev_dev_pro]

thanks

[@manjunathb.e382]

Thank you for the video.. can you please create video on creating Admin Dashboard using material UI. I donot see much on it now.

[@comment8767]

We want to see more of the cat.

[@ErikAkerman]

great!

[@sibozhang3979]

I am a beginner in javascript and React JS. It may sound stupid but I realize the example for Formik in sandbox is .tsx file. Can I import Formik and use it in a .js file? Thanks

[@jtaylor8606]

Formik isn't being updated by the owner any more. Suggest everyone avoids it and looks for an alternative, as it's only a matter of time before a breaking change renders it unusable.

[@djjoe1385]

Thank you for the great tutorial! I have a question for you to ask. The problem faced by SPA websites created with CRA is SEO. How to balance good user experience and SEO for SPA? Do you have any suggestions or solutions? Gatsby or nextjs?

[@shammiguru]

It would have been better if you actually submitted the form once and showed in console the values of the different fields. I tried 'select' but the formik is not picking the value from the drop down list, the console only shows the initial value. If anyone is having same issue and have successfully resolved it then please reply to this.

[@Rahul8624]

amazing !!! thanks

[@mossasameer3338]

we need a big project, thanks for your hard work :)

[@jitengudhka4000]

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

[@Rahul-pr1zr]

Hey, great work! I'm working on a project requiring the need for selects. Do I always have to include a select component it in a form control? So 1 form control for each select?

[@avorpahl49er]

Great series - Stumbled across this playlist/series/channel a few days ago and it's helped greatly! If you're looking for additional topics to cover one area that I've been searching for but don't see many videos is integrating visual analytics within pages (common use cases are admin dashboards to show trend of daily active users or basic statistics). Most of what I can see and find end up looking like 2003 excel pie charts, basic line graphs and subpar scatter plots! In Material-UI's "Discover More" section they have this: devexpress.github.io/devextreme-reactive/react/chart/docs/guides/getting-started/ Which i'm going to explore a bit more. Keep up the excellent content!

[@Matrix8341]

As a beginner trying to learn React and Material UI, I find it hard to cope and understand what you are doing and showing do you have any suggestions of where i should start from to learn react ? I know html and css + some basic javascript.

[@AnthonySistilli]

I have another series that covers the very basics of react :) Check it out! It will help you when doing the Material UI stuff

[@Matrix8341]

@@AnthonySistilli Amazing! I've watched the first one and already beginning to understand react. Thank you so much.

[@federicoaguilera9573]

this formik accept validation shcema for use YUP?

[@rohitmehta3148]

Please make a video on Stepper.

[@hashimjawed9893]

good

[@Grishopping]

Segundo: Soy de Venezuela

[@andresvargas8562]

Hello, Can you do a video showing how to use material ui but now with REACT-HOOK-FORM, I found out it is better than formik beacuse it doesn't cause re renders on components

[@Giorgi-ho8rj]

can u explain

[@arpitjangir3349]

1:41 mr snot lol

[@i.s.i.tagara7263]

your screen very tiny difficult see in laptop.

[@leamon9024]

Hello Anthony, thanks again for the amazing tutorial. One question, how to combine FastField with material-ui component like radio button and checkbox instead of using the regular Field? Since I don't want to cause unnecessary re-render. Here's one of my FastField version: const MyFastRadio: React.FC = ({ label, ...props }) => { return { ({field}) => { return ; } } }; code sandbox link: codesandbox.io/s/focused-currying-83dbw?file=/src/App.js But this one doesn't seem to work. Any idea?

[@mateenmustafa597]

First😍

[@rickhoro]

Sorry, I had to give you a thumbs down on this on video. It would be great if you could give better explanations of the code you show in the video. For example, it's not at all clear why the With Select field uses a TextField component, whereas the Tags field uses a Select component. It looks like perhaps there are two approaches to doing essentially the same thing, but why is that the case and what are the tradeoffs of using one approach vs. another. That is just an example of the sort of analysis of this code that I would love to have seen in this video. If you happen to have more insight into this code, perhaps you can redo this video at some point. Thanks.

[@mateenmustafa597]

Bro i am from Pakistan