Formik with Material UI Tutorial - Create Beautiful React Forms

hey guys welcome back to my Channel today we're gonna try to hook up for make with material UI form elements so this is kind of like what we're gonna build here let me just warn you guys this is not a tutorial video on forming so if you have never tried forming before please check out my other video I made a small series on the introduction to for make I try to explain my best why for make it's useful in that video and show you guys how to set up a form in that video we setup us login form not a sign-off form so please check that one now it links in the description below but today this is what we're gonna make right here pretty basic sign up for so the point of this video is not about forming but it's about how to cook up for me with an external components that has inputs and selects and things like that in this case butter UI so let me just show you guys what's going on here let me refresh the page all right so we got basic validations like notices submit buns disabled right now I can't click it and if it might type stuff here notice you've got a nice material UI element right here here is a text text field if I don't put enough characters it warns me a look is too short but if I put enough no warnings and if I make an empty is as required so it has validation so this is all done by forming but what I have done is I hooked up for mix air handling with butter you eyes showing this error message here this right here is all done by material I right here we also have a select field right here whoops not sure what happened there but we have a select field and things because I'm zoomed in yeah we have a select field and you could choose this is also required notice when I chose this one let me show you guys again I wrote something here and I chose something here now is enabled so now I can click and it shows you the result of my form so this is what I want to make so again the point of this video is to show you guys how I would approach hooking up form liquid motor UI let's get started so I'm on our empty folder right now I call this folder formic material UI but this is completely optional let's get started by first creating on react tab so I'm gonna and I'm gonna make a typescript reactor so the current tradition the current way of doing that is MPX let me zoom in just a little bit more MPX crate react app since I already made a folder I'm just gonna say make it in this folder and then otherwise you will normally put your folder name here but I'm just gonna put in this folder and to make it a typescript create react app we are gonna do that - - template typescript now this is gonna take some time to load I'm gonna pause the video here and just for you just let it finish loading I'm also gonna install es lint and our prettier setup because I just can't code without that that's completely optional though so do that if you want or you just choose not to do so so mine finished loading and I also installed prettier on mine but again that's completely optional let's just make sure that everything's installed correctly so I'm gonna on my terminal on my root directory let me zoom in for you guys let's just clear this mess for now okay on my terminal let's write NPM start to start our app and let's just make sure that everything has worked properly still loading there we go so if everything is working you should be seeing this thing right here but obviously we don't want to show this so go to your source directory let me just make this into a split screen go to your source folder we're gonna get rid of all the stuff that we don't need so we don't need let's see logo we don't need what else do we not need we don't need logo react app and empty Tita TTS service worker and set of tests we don't need these four files right here so I'm just gonna delete them our apps gonna break go tear index let me zoom in for you guys and we don't need this import for the serviceworker we don't need the serviceworker register down here let's get rid of that and let's go to our app I'm on my app tsx we no longer the simple cuz we this logo because we deleted it so let's get rid of that import and we don't need this image because we don't have the image anymore and now we're left with this okay so from here I'm gonna clean it up a little bit more but I'm gonna do something a little different so go back to your index all right we're gonna move our app but it's probably just easier just to erase our app file and then make a new one so I'm just gonna highlight these three app CSS app to test itsx and app TSX and get rid of all of them and then I am gonna make a folder within my soul directory called components lowercase components yes so I'm gonna make a folder called capital app that will be where my app component is contained let's create our index that TSX file in there and I'm gonna put a boilerplate import react from react let's see Const app and we got a type our function here it's gonna be a react functional component react that fc4 functional component and our type of our prop so this is where we usually typed our props but our app won't have any props or we won't have that here and we are just gonna put an empty one because we don't have props and let's just return a div with the class name up Kaprow app and let's just write hello here and export default app so now let's import this going back to our index file let's import this guy in here so our app component is no longer within our it's the same file folder but it's actually within our components folder and going to an app that's where resides yep and now we see this hello here hopefully you guys can see that here I just want to add a little bit more styling to it so what I'm going to do is let's go to our index our CSS this white is kind of blinding my eyes so go to your body and let's put up background color and I had this written down somewhere because I like this color it's actually the react color in the react website it's tools let me zoom in for you guys to 0 to 2 to a let's try that out so this is probably better obviously we can't read our text but that's fine for now just for now let's just put color white here just so that we can read the text there we go alright so another thing that I always like doing in my CSS file is I like using select all put us like the selector CSS selector here and let's get let's make every element the box-sizing we'll make it a border box I don't like the standard content box I like border boxes I think not of you guys will agree with me all right so now we have the basic basic app set up let's get mature UI in here so I'm on the material UI is official website links in the description below but is pretty much this material - UI calm and just to install it and then I read their documentation by clicking here and it just tells us just to npm install at mature UI so score so let's follow the directions go to our terminal let's see I'm gonna make a new terminal here all right now I'm gonna follow their directions npm install at material UI - oh no / core when i install that and he also says here material i was designed with the reporter founded mind be sure to follow these instructions let's follow that link and i encounter i'm going to install reporter fun with Roboto font with this npm install here so let's follow that here npm install and i is in software short for npm type base Roberto we don't need to click write a safe I'm just going to write it like that and then it says then you can import it in your entry point so our entry point is index and here we will import I'm gonna import it before the CSS file import typeface rebuttal and then let's just keep in mind what our app looks like it looks like this right now I am going to go to my body here my CSS index our CSS now within a font family you guys might have it or maybe not but I only have rebuttal in here Roboto I don't know how to say that word but I'm just gonna bring this over and put it as my first font that way it will use that font here I don't know if you saw that change but now we are using Roboto font the font that Google wants us to use and let's see if that is the case and I go to my computed value and see my font at me and he says Roboto right here so we have that set up now let's get for mix setup so before we add formic let's do a little bit of styling so I not dealing with everything shut up at the top left corner this so what I'm gonna do is to my body I'm gonna put margin not of zero but of fifty pixels let's see if that helps up a little bit another thing I do is I'm gonna make my body of flexbox because the content that's inside the body which is the app component and I want to put in a center so the way that I'm going to do that is display is flex and justify content will be Center so that made it here okay now what else can we do I am going to go to my components go to my app folder make a new file here called index no no capital app dot CSS so this will be the CSS file that accompanies my app component and I'm gonna make a class called capital app and we will say this one has a background color it's a background of white and let's put a border radius of maybe 10 pixels I might change my mind later and let's set a width of 500 pixels let's see what that gives us and also a padding of 50 pixels I'm just kind of making these up on the fly we have to import our CSS file within our app component so let's put import app dot CSS and we already named the app so that's fine now the color we can't see anything anymore but that's because within our source index CSS or outer CSS we set a wireless color as white so let's get rid of the line now all right now we see that hello here hopefully you guys can see that so I think this is good enough and now let's go ahead and start forming so we're gonna install for Nick by the way this is the form website and to do that you just do NPM I formic that's way for that to finish now little later we're also gonna use their validation feature and they asked us to install this yup NPM package here that's what former uses to to their validations so that's what we're gonna do however we also because we're using typescript I also want to install the types file of the tight package up for the young so you do that by doing at types / yup so install both yup and add types / yup we don't need to install a type file for for me cuz forming natively is built within typescript I'll using typescript so it comes with its own types alright so those have installed correctly alright so let's connect for make to our form right here and let me just zoom in on this Chrome browser I know why I didn't do this before so here we're zoomed in and I'm also at the form of website and by the way if we start hearing some piano or something in the background I'm not trying to set the mood for this video it's just my neighbor's play piano so sorry but I know best but let's just get the basic for mix set up here now keep in mind this is not a format tutorial video so if something's here compete please check out my other video please I will explain it there in more detail but let's just follow the basic format so I'm gonna first import by the way I'm on the app indexed is X let's import for make these are named imports and form from formic so if you're not familiar with this form either watch my other tutorial or I will just briefly explain it here alright so let's try to make this a little bit more similar to what we had before so to get us started let's just first add an h1 tag that says sign up there we go now I want to add the two fields here but I'm not going to use material UI yet I just want to have the basic form setup first using standard HTML because it's kind take a little bit to build up each of the inputs and we have to impress that we're building one is a text field and one is a select so we're gonna do that one by one but let's just use basic HTML elements first so looking at our website we got our first have this outer format components shell which I will do right now now this requires two parameters if you look at my webstorm is giving me it's complaining to me right now with these red squiggly lines so the first thing needs is initial values this is all required prop and it takes in an object however instead of building the object in 9 like this what they have here let me zoom in here I don't like that actually let me just zoom in like this so instead of having an inline value here why don't we declare our initial value outside of our component so and because we are using type screen now let's type things properly so I'm gonna first make an interface for the values of my form and I will call these form values interface so this will kind of be the type for our form if you will now we have two fields if you remember the first one was a name which is a string and required the second one is I will call position so I don't know if you start from my other video but I'm not the other video or couple minutes ago the form the second was a select input select and you select the position that you want front end back end blah blah blah so this will also be a string now let's declare our initial values that we will place here we're gonna make an object here so I'm gonna call it Const initial values this will be an object he will have a name key with the initial value of an empty string and also a position of an empty string alright so now that we are by the way uh we know the type of this right so it's just gonna be foreign values alright now we're gonna give foreign values to our formic initial values and the second requirement the second required props that formic has is on submit so again instead of having an inline function like they have in this part example here we are just gonna make some BS funk method here I'm gonna call it Const handle submit now for make automatically injects T form values it's our parameter so I'll call these values let me just finish making the thing like that and this will take the shape the type of our form values it will give us back the name and the position whatever we are typed into our input and the result of this function is gonna be a void function it doesn't really do anything returns nothing and now when they click Submit what I want to do is I want a little user with the json dot stringify version of our foreign values so this will show them what they have entered hopefully now let's put that in our and submit and they'll submit all right so what do we do now we are done with for make for now later we're gonna add a validation schema but that's not now will do they in know--but now we put a little context thing inside here this is a boilerplate of forming so put a little curly braces here it has a props as a parameter and we're gonna return so they use the lowercase standard HTML form and we connect on submit with props and to submit very tedious fortunately for a form it comes with this capital form that automatically connects the handle submit with our form elements so that's what we're gonna use here so all you gotta do is use the capital form that we have imported above here earlier and that has pretty much replaced this line here so that's all that that form capital form does it's just a little bit of a convenience factor now we're gonna put our two inputs however before we put our inputs let's use the capital field that forming also comes with so let's import them first and by the way I have shown I have used this component here in my other video if you're interested now what this field component pretty much does is if you let me go back to my other example this other example here you gotta do a lot of things in the standard HDMI input right you gotta add or on change you gotta add maybe optionally or on blur and the valley this is how you make a connected component and react we don't want to do that so for Nick automatically to does that for us if we use the field component right here so let's use that here capital field now this will require a couple of things let's see let's first give it a name and this will be our name field and what type are we gonna do let's say this is gonna be a type of input it's gonna be a standard input and what else do we need do we need anything else maybe not let me just save and see what we have so we got this basic thing let's put a label there why not huh so I'm just gonna make a date here for now TIFF okay terrible styling but I don't care because I'm gonna replace it with mature UI later and I'm gonna put a label here label and let's call this name like so all right so that's looking a little better now let's put a select field so how do we put a select field do they show us yeah I think I was there just now this one I'm not sure if I did this type right I think this should have been s so that's a new property therefore my version two comes with it's telling either a react component or the name of a HTML element to render so when we write as input we are telling forming to render this field as an input HTML input filled later we got convert that tube material UI but right now is just using input field by the way I don't like this out of complete so let's turn that off this is purely preference that way I don't have this annoying drop down here alright so the second field that I need let's copy this div here we're gonna make another div and this will be our select so I'm gonna call this position and not as an input anymore but as a select now harder and by the way the name of this is gonna be position how do we use this I'm just gonna copy their example here I'm on the formic website and let's put a place order to place holder and choose your position and I don't want a closing tag because I want to put stuff inside so let's put a closing tag of the field like so and we're gonna put a couple options in here lower case whoops not sure what's going on sorry I'm not use I'm using the Mac keyboard and I always make mistakes on this I got a new butterfly keyboards and I'm not a big fan to be honest so option value we're gonna say front end front and this is what we're gonna display let's copy this maybe make three more next one's gonna be back end this value here is what gets put into our of form or form values and this is what we display to the user here I'm sure most of you guys know that already and then we have DevOps by the way that piano again it's not me trying to set the mood of this video if you hear it if you don't then that's good but it's just my neighbors clinking right now and what else do we have we have QA all right now let's see what we have all right so we got this ugly form here and by at least you know at least it works now let's put our button that will submit the form right below our second div here let's put a button type submit submit the text let's see what that did alright so let's see if all right let's see if our handsome it is connected when I put my name is Justin and I am currently a front-end engineer submit says here named Justin position nothing so my position is actually not connected so why is that let's see what they did here field name is position I'll complete it or maybe I don't need this autocomplete for the selects on my eraser from the position ah so actually the form is connected let me show you guys again let me refresh if I write something here the position is empty I can't really zoom into this little model here so sorry if you can see but right now side position is empty but it's not that our position is not connected because if I click back in or something else for example now it shows us but what we did is we didn't provide an initial value here so maybe we could just make another option here with an empty and this will have the value of an empty string and that way oops that way starts out as empty and now we're gonna choose one right so maybe that's better alright so now we got something going on so we got the basic form setup again it looks very ugly and we're gonna introduce mature UI later but let's set up the validation to I just want to get all of this set up so that later we could just purely focus on making components that connects material UI with forming and by the way my ambition and my goal for this is we're gonna make components or reusable components components that hook up for make with material UI so that whenever we call on that element like here we're gonna replace this div and this div here with its material UI input and material I select and I wanna put a give as little props as I need to as possible so that is very convenient to use that is my goal with this video but before we do that let's just get the validation set up I'm gonna go back to my form ik website not my forming website but deform ik website go to validations here and we just have to import yup and have the schema set up here so hopefully you guys are used to using yup if not please please please please check out my other video where I make a sign up for sign-in form I used you up there and I explain to you guys what is going on so we're going to import all as yup from yup now let's make our validation schema outside of our component I'm gonna call it Const sign of scheme I like them sign up schema yep that object top shape for the object inside here we have a name which is a yup talk string and we will have maybe mean to like them and we'll say too short as our error message now this will also be required that required required a second option key is position yep that string and this will only have required like that now how do we connect this schema to our forming is we put it as another additional prop here as validation schema this will be our formed what do we call a sign up schema I mean it's prettier on that a little bit it's giving me your air but that's just a typo alright let's see what we have now and I am going to from these props hopefully you guys are familiar with what is props formic sends us gives us a couple things to use props to use the own I'm just kinda structure a structure the ones that I need so the only ones I need I think is dirty and is valid the only check to see if the form has been tampered with anyway meaning has it have they touched a formula is valid just houses it's a true or false tells us if the form is valid or not so let's the structure that from our props for me props dirty and it's valid now I'm gonna disable our submit button and it will be disabled if it's either not dirty meaning no one has ever touched the form has edited any value to it or it's not valid like so so right now I don't know if you see but that's disabled I cannot click this it will become enabled when we have satisfied the criteria so again remember we put the minimum of two lengths for our name if we put one BAM is disabled so that seems to work now we just want to show our error messages here right so how do we do that we go to our field fortunately for me comes with another helper component which is called the error message this will make it easy for us to show airs so let's import it from forming here message and that's just again not gonna be pretty just pop below our fields I'm gonna use the error message we need gonna give it a name and this one will have a name of our field which is name and I'm gonna copy this bring it right below our second select field and this one have a name of position let's see if that works now if I tap out of it it says required good if I do that it's not so shortened so it's telling us the error message that's good alright so this is the form without material UI we have setup everything to do here now we're gonna make two components one component that replaces this name a field right here this input render input and we will use a material UI input for that and we will use a material I select for our position field here this will be a little bit harder than the other one but it is possible and I will try to do my best to show you guys here I'm gonna start by making this name this are making a render input that is a material UI text field let's go to the materialize website and by the way from now on I'm gonna be jumping back and forth between this mature UI website for me and if they're kind of impatient sorry of in advance I just have to do this because there's just so much things involved let's open up this little menu here go to the components it's this one and the one that we want is a text field on their inputs and so they have a couple different ones here hopefully you guys can see this I'm just gonna go with the standard one here now how do we see the code you click this little show the full source and by the way you could either select java script a script I might use typescript although it doesn't really matter in our case cuz we're not gonna be using their crazy typescript stuff here but for us let's go ahead with in our components folder under our source directory right now we just have a pin here and then they make another component here and I thought long and hard about what to name this I am just going to name this formic field now yes it's gonna be amateur you I feel but it's gonna be connected with formic meaning without forming this components useless this component that we are making right now would just be for formic I mean yes you will have the material il MS so I guess we could have called it form immature UI field but that's just a little bit too far Bo's for me so let's just call it formic build as always let's put our index dot TSX file in here and I'm gonna I might style it a little bit later so I'm gonna make a CSS file here too called formic plcs and I I'm in the former field a CSS I'm just gonna make for my field class later I miss comic is empty for now let's go back to our form a field index as always let's write and I'm gonna keep it open that's as always let's write import react from react and what else do we need right now let's just do that right now Const formic field now this one this component will have props so I'm gonna type it a little bit later but for now we'll just leave it empty output props here for now and let's just return a div with the class name of formic field and I'm gonna say formic field I just want to connect this and touch display this on our UI just so that it works export default form field alright now let's see if we could see this oh he's giving me a type script there it's coming this empty for now let's see if we can seek or import this to our app file and use it so I'm back in my F file let's import formic field from data formic field okay so let's bring this here I don't want to erase I know that would I replace these input fields here with our mature UI ones but I don't want do that now because I want to use them as reference so right before a blower name I'm gonna use put our formic field which obviously is not a field right now it just says for me feel but at least we know that it's working properly right so let's see let's go back to mature you are here and let's see what they did so I'm gonna have pretty much copy this for now so let's go back to our formic field put some new lines within our div and what we need is text field and we have to import this first from from a mature UI so mature UI has this pretty crazy componentize componentize is that a word way of importing things but you could just copy it here from here paste it here and let's so we're importing text field from our UI the core / core / text field and let's just paste not a pace but we'll just use the text field within our two divs to our dev tags field let's just see if that works yeah so I'm gonna go back to my page and now we see this thing so it looks pretty good it does a little but to you I shook this blue shoosh thing let's put a label here and by the way I knew that it accepts label because we also have label here and I'm gonna come a label name now look at that we have name when you click it goes up like that's a pretty cool effect right and it stays up there but if it's empty comes back down that's pretty cool I wonder how they stylize that whatever alright so however if we're not interested in hard coding our label like our name like this we wanna a set that as a prop because remember we're trying to make a reusable forming field component where whenever you need a text field component that connects with formic you're gonna use this form element here this component here so as always because we're dealing with touchscreen let's type our props so I'm gonna call this interface formic field props the first prop that I know we'll need is a label this will be required and it will be a string so I'm going to put props here by the way now let's type our formic field functional component by putting brackets here and calling it for me field props oh sorry that's not you type actually you're gonna put coal in here and put react that functional component FC and then put the props like that okay so I like these structuring my props first I guess we could do it here too so let's do that and I'm gonna D structure just the props that we need and instead of using label here and hard-coding the word name here let's use the label that we get from our props like so now we gotta go back to our app if we notice we have an error here because it has a required of properly of label it is required because we didn't put a question mark here so let's give it a label and we will call this name as a matter of fact just to test it to make sure it works I'm gonna call it test see if we got tester or label there we go so it's working let's change this back to name and we had that I kind of want this to go all the way to the end it's kind of short for me so I'm just gonna look through material UI and see if they have something that goes all the way kind of like this one so how how did they do that or this one right it goes all the way how did it all fall way forward can be used to make the implication of the full way for this container container so how did they use that here for with right here it's just a boolean value property that's a boolean value so let's call this text field for with let's see if that worked yep that worked and just so that I don't like autocomplete not is doing it right now but let's write autocomplete 'off okay and let's capitalize our name as a prop that we're passing in so where did it go right here I mean you just put some space around here let's use capital name instead that looks a little better right and so again keep in mind that we're making mature UI form elements show up right now however we're not connecting it to form it yet meaning if we type something here right now for me has no idea what we typed so we want to fix that one by one but let me just see if we need something we do not so now I'm gonna go ahead and try to make this connect it to form ik so going back to my form ik field me zoom out just a little bit hopefully you guys can see now I'm gonna do something it may be a little confusing but bear with me I'm gonna use this capital field prop that we use before do you remember this it pretty much injects the on change on change on blur and the value of the field into this field and that's what we want to use and the property that we're gonna use to connect this input with material why is our as proper that we use before so this as property doesn't just a set a string by us or subcomponents and we're gonna give it the component text field let's see if that will work so I'm gonna comment this out right now and I am going to import first field from react and within art outer div let's put the capital field here and we are going to render this as text field text field like so let's see if that works oh no it did not work import feel from react I'm not sure why I wrote react it should be for Mick sorry about that alright so we got this kind of crazy thing going on it says object object however you can see that this the mature UI is here right so that's good I guess now how do we pass remember we pass a couple properties to our tech CEO such as autocomplete and label and for with whatever properties you right here in our field it also gets passed to our component that we are rendering this ass so I could just write autocomplete off here put a label of label and for with let's see if that works refresh the page and I am still getting object object and the reason why that's happening is I didn't give it a name property for feel we have to give it a name because for me doesn't know which value - or so which value this field is associated with so one of the required properties of field is name and so we have to pass it down as a prop so I'm going to put name it's a required value it's a string let's do structure that from our props and put name as name like so now we gotta go back to our app and give it a name I'm not sure if formic is gonna complain to us because we have two fields now the has the name of name maybe maybe not but it seems like it's working so do you see how it's connected now but look they are connected do you see that whenever I type something here here's over here because the value that they are connected to is the same one so that's good so we got that set up now check this out if you only have one word it has to short here right how do we display the error message or our mature UI element here the way that I am going to do that is I'm gonna go and back on my material you are I don't know why I keep singing my about your UI and you guys see this some important text stuff here I am going to try to do that for us I'm looking at the source code I'm gonna try to find some important text yes right here help protect so they use this property called helper text to display those text so how am I gonna do that I'm gonna pass it down as another property to our field call it helper text remember he will pass it along to the text field component and let's just write test here to see if that works so it works right here and I can't don't like how this is so squished up here so I'm gonna go to my formic build a CSS and I'm gonna give it let's see a margin let's write 10 pixels zero pixels so 10 top and bottom zero left and right that doesn't seem to work because we did not import our CSS file within our formal fields import same folder for me field dot CSS we already called a class field Foreman field yes so that gives us a little bit more space right of breeding readable space all right so the test works the air works so that's good however we don't want to hard code the error message we could all again use the error message component that form it comes with and for our helper text we know that if we go to our format website go to the error message this pretty much gives you back a string this gives you back a string so the only thing we got a pass to it just like we did before but in our app just pass it a name so how protects is gonna be a error message with the name of name prop that we're getting passed down like so let's see if that works so right now no errors but however if I just use one carries that's too short if it's empty is required and by about now so that's our error messages is showing using mature UI's helper text I also want to do something else it's not required I just saw right now looks kind of nice I think do you see how it says here required no how do they do that let's see because I know that our values are required to write mmm oh they use this required keyword here I think that will print the asterisks let's see if that works let's put required here oh and now we got this little as I guess that's the own this property pretty much just only puts the asterisks here but I guess it looks nice right and in Leicester you know that it is required which it is in our case so that's that's nice alright so our I believe our formic field is done so let's erase this old text field here and I think it looks pretty good and before I go on I I want to do one minor detail thing so the goal of this formic field a component here was to make it reusable and right now it is very reusable so let me give you guys an example by the way let's see racer old Dave here this one I don't want this ugly input anymore so let's get rid of that and the cow become neat this looks we got this one forming field component here that we all we gotta pass it its name and the label very clean right well we could even make couple of these like for example we could do that we could write email here and password here our label will be D mail and label will be password so look how neat that looks you know that it's very easy to use right so however to make this really reusable I think we gotta do one more thing for passwords usually you don't want to show to what typing in right here right you want to hide that so typically how we do that in our standard HTML form element info field is a type so I want to give another property to our forming field called type now this will be an optional prop and it will be a string and the reason why is optional is because I'm not default II type as a input field so type and I'm having a little bit of brain for right now was he called input no it's called text field the default type that we're going to have is going to be a text field so if they don't pass the type of prop down then it will automatically this property this part will become text and within our field we're gonna put type as the type that we receive from the props so right now because it's not required we have nothing breaks however for our password we want to give a type property of password and that way now we have our input concealed so now I think we have successfully made a formic field our text field connected with material UI so let's get on with a harder one which is to make now to select using mature UI and before we go on let me just erase these other examples I've had here let's just keep the name let's say refresh the page there we go so let me show you guys why it's gonna be a little bit more difficult to make this render select kind of like what we did with our format field so if you go back to the react material ui website I mean check this out so the standard field we pretty much just use one component right from mature UI now let's go back to our menu on the Left menus go to input and let's click select this time all right so this looks pretty simple here but check out the code source code so if you check out the source code for this age one right here we don't have just one component but we got this foreign control outside and then we have an input label just for the label we have the actual select and the menu item so these are all imported from mature UI so that's why it's a bit more complicated all right let's make within our components let's make a folder called render selects no now render select formic select and within this just like before we will make index TSX and also a formic select dot CSS so within formic select a CSS I'm just gonna make our class of called formic select and just like with my where did it go formic build CSS I'm gonna put this margin 10 pixels 0 within our formic select and close it because we don't need any more I don't think now that I'm on formic select our index as to the import react from react and I'm gonna do Const for mix select no props for now so no need to type it for now and return the class name of for mix light hello for mix let I just make sure that we could connect this successfully export default for mix select and before I forget let's import our CSS file import format select like so it jumped around right now cuz a prettier so ignore that now let's go back to our app closest CSS files because I don't think I need them anymore so and I'm gonna close by forming filled file and our index so we just need app and format select so go back to our app and under our select Dave right here let's first import for Mac select from data WAP one level four mix light and below our select position select here let's just use it for mix select let's see if that worked so we say hello from strike so it is connected now all right now before we connect form to it let's just try to display this material UI elements so what do we need whenever for virtual input label select menu item you know what I'm just feeling kind of lazy I'm just gonna let's grab this input label menu item form hyper text form control and select let's grab all of these we don't need the one above but let's grab those so input label menu item form hyper text form control select and using this as an example let's erase our dummy text here put a form control make it open like that we don't need to give it a class name let's put an input label and mmm we'll call it let's should we call it position and select capital select what do we need to give it a value to shoot you're apparently now we want give it a pallet for now and let's add some child items menu item I don't want to give it a value now although it might be a required properly let's call it front and this is the menu idea that we are displayed to the user back-end DevOps and QA and by the way I also want though this required do you remember this from before for later our error message handling later so how did they do that so if we look down do we have this form hyper text and we gotta put that right below our slide and I'm gonna say our error message is just gonna be required so notice we're all hard coding all the same obviously we don't want to do that in the feature let's see if that works alright so we got something going on here it looks pretty hideous it's too small but at least the position labels working these guys are working although I can't really select them and it says required so that's good now why is it so small how do we make it bigger so he probably has to do something similar with the full width but I'm not sure well where to pull this pull that I'll put that sorry I can't speak English today but I was a specialist within our form control so within our components or rather let's go to component API just gives you a more detailed description of each of these components I'm gonna go down this alphabetical order let's go to form control and let's see the property receives so it receives the full wave property if true the component will take out the full width of this container let's do that full width yes and now that looks much better right so we made this a select now we gotta do the hard part of connecting this to forming and this will be a bit of a headache but as a matter of fact she's my mind before we do that let's think of our goal or ultimate end goal is to make this a reusable select field right but we don't want a hard code the menu item bar items like this so how are we going to handle this so what we're going to do is we're gonna pass this as a prop but before we pass that let's start introducing types of this so we'll call it interface for mix select props and we know for sure that it's gonna need a label just like our format field which is gonna be a name and it's required and I'm gonna start writing this one by one here by the way let's type art form select is a functional component reactor FC and it's props as a type of formic select I spelled this wrong formic select props like so now let's see structure may our label from it and use that label where did we put the label here input label so let's use our prop label from here by the way I don't know why God's name there should be a string and let's go back to our app now we had to pass in a label here and we will call it position with a capital P like so so now that's connect and just to make sure that it's working I'm gonna change this to call it role see if that changes there we go so now we're connecting I feel like role better but I'll just go back to position alright so now that we have that connected the question remains how do we pass it we want to make this a reusable component as the items so what I'm going to do is I'm gonna have this accept our items properly and this will be an object this will be an object that has two key value pairs the first one I'm not gonna make another type here so I'm gonna call this type actually interface for make select items and this will have to police you will have the label which is a required string and you will also have the name which is the name that we're gonna put for our um maybe they is not the right word how about value the value that the forum will receive this will also be a string so our items properly that we're gonna pass from now on it's gonna be for Mac select items and let's see structure that from our props like so and before we begin implementing how to use I here let's do this I'm going to declare our position items outside of our component how about right here now whether below this Const position items and if you want to be really hardcore with your typing you could export these forming select items here export forming select items and import it from here as a named import from next select items like so and we will type position items as foreign expected items and I think I made a mistake it should actually be an array that gets this so it's actually an array because we could have more than one items and we will have more than one items within our select so it what and this will also be an array and maybe then the better name for this is forming select item instead of items like so all right now let's begin typing this is gonna be an array the first object gonna have a label of front end that's what we display the user but up value of front and like so let's use underscore copy this one for back-end - we're gonna have four total we're gonna call this back-end back-end the verbs the apps and QA and now that we have declared this let's pass it along as a properly remember we call the items right we'll pass a long position item so there's no longer air but now we got a task of using this ayah means properly to show the different types of positions like so instead of hard-coding in like this all the way down at the base within our selects I am going to get our items map it by getting each item and returning immediately the menu item that we're using for here we have to give it a key because we're using a map on Ray and I'm gonna use a key of item value like so and here we're gonna display the desktop what's the label yes item that label as to display what we display to our users and menu item how do you it is associate it with the value how do we show the value so I don't remember so I'm going to go back to my select go to the source code and look at this and they use value how it just uses value okay so we put giver another property to our menu item called value and we're gonna give it the item type value and that should work so let's erase these hard-coded menu items here and let's see if that works it seems to work oh yes it seems to work so it is working now just to make sure that it is working properly I'm gonna change this name to front and gain I got the end game adventures endgame in my mind right now yeah and it works so now we have successfully made it so that are reusable forming select component we could pass down ideas which is an array of objects that has a label and a value so I think this is pretty standard to make a reusable select component to pass down a prop like this so that is good however we still didn't connect this to forming so for example if I change the position here if I write something and submit notice I have put back in here he has no idea what type of value that this field has because it's not connected to forming yet so now we got that task but the reason why that is hard is if you look at this let's compare let's go let me just make this a little bit bigger let's look at our formic field which is this simple thing here we are using this capital field component from formic which automatically passes down to the component that we're using in this case text field the value property the unchanged property and the onblur properly it automatically passes those down and text field component which is a mature UI component in turn uses them to show the value to handle the unchanged event and to handle the employment however and remember we're using this as it's telling forming what to render this field as we don't have a simple component to render it as here we got a bunch of components here and not only that where do we pull if we just pass where do we pass the on blur on change and valleys so we gotta get creative with this and that's why it's a little bit more difficult so let me show you guys what I'm gonna do ultimately I want to put a formic field here and right render this as something right so I under that make another component within the same file now it's okay to make this within the same file because this will not be a component that I export to other places this component I'm gonna make right now would just be used for this formic select so let me think about a name that we could use I'm thinking of maybe Const material you I select field how about that a little verbose but we're only gonna use it once this is gonna be a react functional component and hmm we got the issue of what the props is gonna be but that's fine that's fine I'm just I'm not gonna type it for now and I'm just gonna write props any will type in later and alright so bear with me oh this is what I'm gonna do I'm gonna grab this part right here and I am going to paste it in our return value of this material UI select field now hmm but instead of using so again right now is airing out because it doesn't know what a label is and what items is but for this one I'm not gonna pass in the items and rather than rendering the items here I'm just gonna pass down on children like so so let's start typing on material I select field oh but this one I do interface material UI select field props and this will extend our formic select actually not change my mind let's just leave it like that it will also a scepter label which is a string but it was up children which is a react is a reacting pretty much when you have a component that has you could add stuff inside of it like this we could open it and close it and whatever you put here that's called the children so a standard way to type the children is using react node which you can import from react like so notice up here we are importing react node and let's see let's begin let's type this now material U is like your props and that is wrong react up FC with the properties this property right here now we don't need this any anymore unless the structure the ones that we need label and children alright so that seems to be in order notice our form how protects is still hard coded in not ideal so let's just pass that out as a property to and we will call I will just call this air string and should I make this required or should I make this optional I will make this optional and it will be a string value so let's this structure that here and instead of hard-coding this in required we will use air string here alright now I am going to be very careful comment this form control out and try to use my material I select your component here but to you I select field we need to give it a label so I'm just gonna pass down the same label as before like that and because we whoops because we gave it our children properly we're gonna pass down this part right here our items to copy that paster here and that will be received as a children property which in turn will be rent ah put here let's see if that works so I'm gonna make this smaller again and it seems to work oh now remember we gave it an optional air messy air string properly so let's use that here let's see if that works so we have material you I select filled air string it's gonna be test test test and we gotta test test test here so that is working alright so now why did I decide why this airing out my choice is assignable oh that was just a webstorm bug alright so why do we do this we want to now convert this part right here instead of doing it like this we want to use the field component that form it comes with so please I hope that you're following along let's import that from our formic we don't have formic here so I'm gonna import it here import field and I know that in the heirs of form for the error message error message from forming so just like what we did with formic field we're going to use this field component here now let me just open our forming website as reference so we are going to do something like this right here alright so I am going to comment this out I don't I'm scared to erase it so I'm just gonna comment it out for now and I'm going to use our field so field remember always needs the name property let me just actually make it opening closing and we're making the open and closing cuz we're gonna pass down the options which again we're gonna pass it as whatever we had before where we have these items our mapping right we need a name property here right so we didn't type that yet within our form select props so let's pass it name which is a required string so let's go back to our app now he is airing out for us because we gotta give it a name and we will give it a name position let's go back to our form select the structure form our formics select he name properly and give it that name and what else do we need name oh and we gotta give it a ass and we will say this will be as material UI select field like so and because material echoes has a couple required property such as label we're gonna passed a long label and an error string but this is what we'll do with the air string just like before we are gonna use the error message component because that returns a string like that and we're gonna give it a name of name that we have passed down I mean it's pretty early just to make this a little bit more pretty alright so that's looking a little better and within the child of our field we're just gonna copy these items that matting so let me uncomment this for now let's get this item stuff going on here and paste it in here let's see if that works let me erase this now hopefully it works and it seems to be working it seems to be working however it's still not connected I'm gonna I know that it's connected when I start when I mess with this the value within this our components should also change because they are referencing they had the same name in our form they are both they both have the name of position do you see this so right now is still not connected and the reason why it's not connect is because remember what this feel component does from forming it passed on three properties values on changing armor but we're not using those here so first we're gonna set them as the props which they are already technically here because we reuse this field component oh now we're just gonna set them as prop so let's type that first now I could manually go to your material I select field props and put value here on change here and titles manually but for me because it's already made with our type script it has his own type library so I'm gonna go to our field and see which one can use let's see I think field props interface field props field input props how about that one yeah so do you see this so field input props takes our generic of value and it takes in on change it has on change on blur multiple optional checked optional name which is required and value so this is what we want right here so field input props that's what we want and what does this value use for this value this type that this field input type interface uses is the type of the value in our case or the value of what we write here is a string so our value here that we're going to put is a string so let's use that back to our form select and we know that this will be part of our material I select field prop so we're just gonna extend this with field input props which we will import from forming right here remember accepted or generic and we're gonna say it's a string cuz we're saying the value is a string now we could freely put in our material I select beyond have access to the value let's see we also have access to the name because that also came within our whoops shoot yeah that also came within our field input props as you can see here name right here I'm going to see race these clothes those other ones and we also have on change and armor so those are the things that the this field component passed along so let's start using these here where do we put the little name we put the name let me go back to our mature UI let's go to our component API and I want to look at or select a select component more in more detail so it accepts for example on change of value and I'm just gonna try it so let's I'm not give it a name of name on change of the on change I'm also gonna give the on blur I'm not sure if your subset on that but I'll just try and value will be the value let's see if now let's see now if it is connected and again I know that it's connected if I change this they should change to doesn't seem that good I mean not strong anything something moved let's try something else try that so it doesn't really seem to fully connected yet let's see what's going on I'm gonna write the name here and submit and it does say DevOps I know what's going on you know what's going on so go back to our here I use hyphens here whereas in our material I ones I use underscore so that's a problem so let's change these to underscore and now let's see if it works refresh the page change the value and now do you see this has this has become updated so now we are fully connected so that is very good we are almost done do we have an error message let's see if we have an error message I type something here it's still disabled I mean I yes now it says required to see that so error message is also connected and the values of this is also connected so that is good alright so just to make this so we're pretty much done we're almost done um I like this little asterisk thing that we put into our text field I want to also have that in a position because I know this is required to and as a matter of fact to make us really reusable what only pasta as a bar as a property we can't assume that whenever they use this formic field so I'm talking back about the formic field now let's go back to that back to our formic field we gave it this let's see if format field we gave it this required properly but I can't assume that it's always going to be required so I'm gonna pass that out as a property required and it's gonna be an optional value and we're gonna say required it's a boolean and I'm gonna T structure here and I'm gonna say it's an initial value or default value is false so I say required is now the required property the Astra should go away as you saw here cuz we can pass it down however if we pass it down now within our app go back to our form field and let's write required here let's see if that works now you see the Asterix can I want to do that with renders forming select here let's get rid of this old ugly select here now we just have this to clean form the field informing select and let's also past require to this one and see how we can use that one is airing others we didn't type that yet so go back to our forming select now we're gonna type our metaphoric slag props with required optional one that is a boolean within our nominee UI but a forming select and then at the structure D required and say that it is default false and where do we put this where do we put this in our format field we put it within the field so I'm guessing we just put it within the Select so I'm gonna pass required down and you know what why am i guessing let's just look at the API I'm gonna Google or search with higher and it is actually not here so maybe then it is within our input label because it's actually the input layer that has a little asterisk right so I'm gonna find within the component API input label let's check this one out does this one have require yes now this one has required so we're gonna pass required to our material you I feel props required and this one will be I'm gonna say that it is a required value or not optional because I know that even if it was option to our forming select I am giving a default value to it so now when we pass that required Valley to our mature UI it will have a value like so requires a boolean unless the structure here and within our import label we will pass the required prop like so now we get the little asterisks or fancy asterisks here alright just to finish up this form so I think we did a pretty good job of making reusable components for forming filled and forming select just to finish up this form however let's make this button as a material ID button so I'm back on the material UI our website let's go to components and go to button under inputs and let's see this one looks good right it's good enough so I'm gonna check the source code and he's button so we got our first import that from let your UI core button so I'll go back to my app I don't want to make a separate component for you because that's unnecessary by the way notice we're not using field and error message here any longer so let's erase those from our inputs or for Mac and import button let's I don't wanna erase the button yet however let's see very contained I'm not sure what containers but I'm just gonna use it because they're using here color primary we're also going to give it a disabled property with the same condition and a type of submit so for me one know that this one semester for all right let's see races off button and hope that it works refresh the page iron Sanada excreta is disabled right now but once we have satisfied the criteria it is enabled when we click it is connected all right guys so I think we have successfully made reusable components for my components that uses material UI as form elements we made it for two specific field types or one a text field and one a select field now as an added challenge I challenge you guys let's go back to our material ui website there are more than obviously are more than these two components so we have things such as a date and time that does this fancy stuff right here we have here's a easier one already a button like so and we also have a checkbox on another easy one so as an added challenge I challenge you guys to make these reusable components that connects with forming it should be fairly as similar as to what we did here you just have to look at the source code and see where what goes what so try to make this and by the way I'll feel free to use these components I will post this on github links will be in the description below and let me show you let me just tell you guys right now what my ultimate motivation was to make this so I'm planning on making a full-blown formic and yup validation tutorial video so when I was first learning forming and the yup validation that I needed to do at work there wasn't too many videos that went too deep with the up so yup is a very powerful validation tool that we can use with formic we could do crazy validation stuff pretty much anything I could think of you could do it in yep however I know they said there's not too much documentation now there is documentation online but there's not too much video documentation on how to use your effectively and so I want to make a video that shows you guys how to do that we won't go to all sorts of types of your validations and I think unless I'm misinformed I think it's gonna be the first YouTube video I'll show you guys just how crazy we could go with your validation and also we're gonna go into stuff like build array and things like that so again this type of this disk code will be on github and look forward to seeing that video soon I will try to make it soon if you like my content please click like below that helps a lot stay subscribe to my content so you could see my featured videos I release these react videos I released JavaScript tutorial videos anything everything that you see in my channel will be about coding so guys thank you guys so much for joining me this was extremely fun for me to make and I will see you guys next time

Channel: Justin Kim

Views: 21,055

Keywords: Javascript, React, React Hooks, Hooks, Programming, ES6, ES2015, Coding, Github, Formik, Forms, Typescript, Interface, Material UI, Tutorial, Code Alongs, Reusable Components, Yup, Validations

Id: ziWJ4k_3BLk

Length: 88min 5sec (5285 seconds)

Published: Fri Jan 24 2020

Reddit Comments

[u/justinkim943]

Hey guys, in this tutorial I go over how to make reusable form components that uses Formik and Material UI. I haven't seen much videos around this type of topic, so I really hope you guys enjoy!

Also feedback would be greatly appreciated :)