React Forms: the SIMPLEST way

if your react component is cluttered with a bunch of use States when you're dealing with forms then you're probably doing something wrong let me show you the right way of dealing with them alright so that's gonna be our example which is basically a couple of input Fields so let's go back to the code and I'm gonna show you the bad way of structuring your react forms so here we have a registration form component and we have a bunch of useless use States declarations right looks kind of weird and here we have that HTML so let's take a quick look first of all we have a form element and inside the form element we have form groups all right so and yeah of course we also have a button okay so you might ask what is this form dot control or form dot label well it's the same thing as an input field but since I'm using bootstrap above just to style our form kind of better here you can see that I'm importing form and importing the button component to make it look a bit better like this and have some colors I'm using form.control but never mind alright what what else we have we have an on change event which is going to be triggered every time a user presses a key and it's gonna have this e which is an event and we're gonna set the value of a state by passing e.target.value and it's going to save it on the Fly and it's and I'm doing the same thing for every input field okay one thing to note though we have this name attribute for every input field but just keep it keep it in mind it's gonna come into play later and also we have a button so how do we send the data to the backend okay how do we submit the form so I would create an on click event and pass this function called submit form of course it doesn't exist at the moment so let's go up and create it so like this I'm going to declare a variable with the same name and it's going to be an anonymous function this and inside this Anonymous function where you can first of all accept a parameter basically an event and what we're gonna do first is we're gonna make sure that we prevent the default behavior of a form because if you don't do that the HTML basically the default behavior of the HTML form is actually making a get request and reloading the page and we don't want that and also let's console log our values these values are coming from the state okay so I'm gonna consolock first name last name email and password and these are going to be in an object and they're coming from here and not from here okay just to make it clear and now let's kind of save the file and go to our app and look at the console log or the console after I fill this out and this is my email and a password click submit and here you can see that it basically outputs the payload that we would send to the backend okay everything's good so far but first of all as I said this is not a this is not the best practice so it's a bad practice to have so many use States what if we have like 10 input fields or even more are you gonna declare all of them here probably not the second thing is that we're not utilizing the html's default behavior for submitting forms so put in an on click event on a button is not the right way because we have this type submit on the button right so how do you do it properly well the form element itself has a submit event so but in a TSX world or react World we are declaring it like this so on submit and we're gonna pass the same function so nothing changes when it comes to the function um calling but we also need to remove these on changes because they are no longer needed we're gonna have a one place where we deal with the form data or with the payload so I'm gonna delete this one I'm gonna delete this one too all right looks much cleaner okay now let's go back to our submit form okay and just make sure that you remember these you do red so we're going to grab the values from them next time so let's create a variable called form data and it's going to equal to a new form data what is this new form data well it's actually kind of a Constructor a JavaScript Constructor I'm gonna hover over it in a second but first of all we need to pass e.target okay so that it takes valid and it says provides a way to easily construct a set of key value pairs representing form Fields okay and these key keys value pairs are going to come from the name attribute that you saw before now what about console logging it out so I'm gonna put form data and save it and let's go to the app and okay my valves disappeared so I'm gonna just put my first and last name click submit and here we have form data but for some reason it's empty I wonder why Well turns out the form data is actually in a different format yet that it doesn't show up so easily so let's create another variable called payload and what we're going to do is use object from entries and pass the form data what from entries does is basically let's hover over it returns an object created by key value entries for properties and methods but it's basically going to construct a JavaScript object from this form data okay now we change it to payload and now let me add my email again and the password and click submit now we have the same values again but now we're using the best practices of HTML forms so this is very cool one limitation though is whenever you want to use controlled inputs in react for example and for example let's go back to the app let's say I'm writing my first name but you want to convert it to a lowercase on the fly right so this is my name but you want to convert it to a lowercase as I'm typing or let's say you have gaps or spaces between the name and you want to trim them basically remove them you still need to fall back to using the value attribute coming from react and probably on change so that you can trim them on the Fly and also use State okay so you might ask me then apparently everything that you told me five minutes for for the last five minutes is garbage well actually no the thing is if you have a simple form you can go with uh without on changes and without a state but if you really need controlled input then you can you probably need to use a state but you can still keep this submit form right and use it on the form element what you're gonna do is basically use native validation attributes of react for example like a Max Min pattern and you can within JavaScript you can still check for the for for the validity with the help of the check validity method okay hey there it's me again I just wanted to quickly say thank you very much for watching this video and smashing the like button and if you want to stay up to date with such cool topics make sure you subscribe so that you don't miss whenever a new video is out and I'm gonna see you in the next one

Channel: Software Developer Diaries

Views: 18,963

Keywords: software development, software developer, programming, software engineering, javascript, web development, coding, react forms, react forms tutorial, react form validation, react forms typescript, react controlled form, react forms api, html formdata, html forms, react forms without library

Id: CT-72lTXdPg

Length: 8min 11sec (491 seconds)

Published: Tue Dec 13 2022