Material UI Tutorial #7 - Text Fields

Key Takeaways

all right then so currently this is what our create page looks like just a title and a button and ideally we need a form here so users can create new notes so we need to start thinking about how to use form elements with material ui and the first thing we're going to look at in this lesson is text fields so i've already got up the documentation for this text field right here and if we go down here we can see how to use these text fields so they're very very simple to use right here and we can have different variants so this is a standard one this is a filled one and this is an outlined one and we decide which one of these to use by using the variant prop again so we're going to use this outlined one right here so let's try creating a simple text field first of all inside this component now like always the first step is to import the component we need so i'm going to paste this in we import text field from material ui forward slash core forward slash text field now we want to create a form down here so let's first of all create a form tag we don't use a special materialize tag for this we just use a standard form tag but i am going to add a couple of attributes first of all i'm going to add one called no validate and what that does is say to the browser look i don't want you to use your built-in validation messages so we're going to handle that ourselves now the second thing i want to do is set auto complete equal to off and that's so it doesn't try to auto complete anything when you start to type all right then so now inside this form i want to do a text field so let's do one text field like so now if i save this as is and come over to the browser let's come over here we can see this line right here so it is there and we can start to type in it but i want to use a different variance inside this text field and by the way it doesn't have to be an opening and closing tag we can just have one single one which is self closing all right so i want to add a few different props to this so the first one is going to be a label and this is going to be note title now if we take a look at this come over here now we can see it has a label above the input and if i refresh we can see the label actually sits in the input until we click on it and then it comes up over it so that's the label now i also want to apply a different variance so variance is equal to outlined instead and if i save this and preview we can see it looks like this now and if i click on that the note title goes up here it's not actually meant to fade out it should actually still show and i think it's because of the primary color so let's use a different color remember by the way in the last lesson we went to app.js and we said the primary color should be this kind of whitey gray color so i think it's because it's using that primary color let's instead say the color is going to be equal to secondary and i think this should work if we're clicking it now yep now we can see it uses the secondary color so before it was just like that off white and that's why we couldn't see it but now as we click in the label goes up and it's part of the border which is quite nice okay so that's a basic text field right there now i also want to apply full width to this and what that does is make this thing full width across the page i'm also going to add in a required prop right here now this doesn't add any validation all it does is add this little asterisk right here to say this is a required field and if we take it out we can see it right there a bit bigger okay so now i also want to add a css class to this so we already have this use styles and make styles object up here let's just add a class to this and this class is going to be called field and we'll apply this to any form field in our form and all i'm going to do is give this some space in some margin top and i'm going to set that equal to 20 also margin bottom if i can spell this margin bottom and set that equal to 20 as well and then finally display block okay so i need to apply that class of field to this text field right here so let me do that i'm going to say class name is equal to classes dot field and remember classes comes from here where we invoke the hook use styles which is what this is called all right so let me save that and hopefully now we should have a bit of space in for this awesome cool so that is the first text input let me now do another one and this is going to be for the note details so i'm going to grab all of this and copy it and i'll paste it down below and this time i'm going to change the label to details right here like so and now i want this to be multi-line so instead of just being one line across i want it to be a bit taller and we can easily do that in material ui by just adding on an extra prop so i'm going to say multi-line and then also i'm going to say how many rows this is going to be and so i'll say oops that needs to go on the next line so rows is equal to 4. and so that's going to mean four rows of text inside this text field so that looks a bit better it's a bit taller cool so there's our two different form fields now then i also want to track what a user types into these and store them in some kind of state so what i could do is just add on here and on change events which is going to fire a function and we can do that on both of them now in order for this to work i need somewhere to store this value so let me create a bit of state for both of our different fields so at the top of the component i'm gonna come down here and i'll say const title and set title and by the way if you don't know what state is or what use state is this hook that i'm about to use definitely check out my react tutorial first of all so i'm going to set this equal to use state and then inside here we set an initial value which is going to be an empty string now i'm going to duplicate this and i'll change title to details and set title to set details like so and then down here i can just fire a function which is then going to update that value so i'm going to do a function and then inside this function i'm going to call set title and i'm going to pass in e which is the event object and by the way we have to accept that as an automatic parameter right here inside this function then dot target which is the target element and then dot value and that gets us the value that is currently inside the text field the input field so whatever user types into that now every time they type it updates the title with that value so i'm going to do the same thing for the text field down here only this time it's not set title it's set details so now as we're typing into those fields we're tracking those and we're storing those values in these pieces of state now there's no way for us to check that at the minute so what i want to do is add a submit handler to the form so i'm going to come to this form tag right here and add on and on submit property and i'm going to set that equal to a function called handle submit now we've not created this yet but we're going to create that now up here so i'm going to say const handle submit and set that equal to a function where we take in the event object now we need that because the first thing i want to do is prevent the default action and the default action of a form being submitted is to refresh the page and i don't want that to happen all right then so down here what i'd like to do is first of all check do we have a value for the title and the details because if we don't i don't need to log anything to the console so i'll say if title and details so if that is true it means that these are both not blank in that case i'm going to log those to the console so console.log title and details like so all right then so hopefully fingers crossed this is all going to work but it doesn't it says use state is not defined that's because we've not imported it so let me come and do that i'm going to place a comma right here and say use state to destructure that from react as well save it come back over here i'm gonna open up the console so if we go to console if we start to type in here and start to type in here and submit it we can see oops you clicked me so this has not submitted the form and i think the reason it's not submitted the form is because yep the button is not inside the form so for a form to be submitted when a button is clicked the button has to be inside the form ideally so let's try this again in a second let me just scoot this in like so all right so let me come back over here and in fact we can get rid of this on click event on the button now so let me come back over here and let me try this again submit and now we can see those values but if we empty one of these fields then hopefully yep it doesn't log those to the console because these right here are not both filled in they both have to be filled in for it to log this to the console and eventually that's going to be the criteria for us to submit the form okay now there's one more thing i want to show you and that's how we can add some kind of error state to these text fields so we can add on another prop to these text fields called error and this is going to be a boolean it will either be true or false if it's true then it's going to show some kind of error feedback and that error feedback is this red border and red text so if it's false it's not going to show that error feedback now ideally we want this value to be dynamic and what i want to do when the user submits the form is check look do we actually have a value for title if we do then i'm not going to show this error and i'll keep a value to be false for this error prop however if we don't have a value for title what i'm going to do is update that value for the error to be true and then since it's true it's going to show that red border so again we need a bit of states what i'm going to do is copy these two and paste them down here and we're going to have a title error and we're going to have set title error and down here it's going to be details error and also set details error like so and to begin with these are both going to be false because we don't want to show those errors to begin with now down here in the error prop i'm going to say title error for this one so that's going to be false to begin with and then down here as well error is equal to details error and again false to begin with so if we check this out in a browser both of them are false we don't see that red border awesome however after we submit the form then i want to do a check so right here i'm going to say look do we have a value for the title i'm going to say if and then title is equal to just an empty string now if that is true it means they've not typed something into the title and in that case i want to set this to be true so i can use this function right here to do that use title error so i'll pass in true right here and i'm going to do the same thing for the details so let me do that as well paste it in and change this to details and also this thing right here to details okay cool so let's see if this works i'm going to save this and preview in a browser now if we try to submit we get errors on both of those if i enter into one of them and try to submit notice this error doesn't go away so why is that well it's because we're never resetting this thing back to false it was set to true here and then when we submit again even though it's now valid we're still not setting it back to false so what we can do is to begin with every time we submit the form we can update these values to be both false then we do the checks and only set them to true if they're not valid so let me do that i'm going to say set title error and that's going to be false and then i'm going to do the same thing but for the details like so and then let's see if this works so let me refresh to begin with now if i try to submit they're both errors if i add in a title and submit now this one goes it's not an error anymore if i type into here and submit both errors go and now we get them logged to the console as well awesome so this is all working now we have a text field right here for the title and a text field right here for the details the errors are working on them and we have a little bit of form validation as well when we submit the form now there's one more thing i want to do with this form and that is for the user to select a category and to do that we'll use radio buttons and we'll see how to use those in the next lesson