How to code a form in React

what's up guys I want to show you how I do forms and react using new libraries just react I'm going to use Redux form Redux any of that stuff just using local state and directly and react I've used reacts form a lot and other things and I like this method better for a lot of forms because you don't really need some of the extra stuff some of the libraries give you so I have right here a react application up that I'm going to show you demonstrated on this is just using create react app and I'm just going to create a new component as you can see if you don't know create react up is I recommend googling it create starter kit I just have the initial kit open and I'm going to show you how I will create a form component so for machi s and I'm just going to import in form from form yes and we're going to add it to our project here and display it and then we're going to put our logic in form alright so I'm going to import react from react and here we're going to make a class now you can't really do a peer functions if you want to create a form and react because you want to use the state so in extends react component and we're going to have a state here now I'm just going to do a simple registration form maybe where it's asking for first name last name and here's your name email and password okay so staying here is going to hold all the values so as people are typing in the form what we want to do is going to update the state here and then we want to have the values that are here reflected in our form so in our render function and do returned here I'm going to create a form and we're going to create some input fields now this is not specific to just input fields you could be using a UI framework like bootstrap material UI and semantic UI there's tons of them you this works just like that for any styled input so here what you can do is you can say value is equal to this state value or dislike state value and value being whatever you wanted to be so I'm going to say this is first name so I'll say placeholder just so we know what the value is we'll say first name and we have the value here so whatever value is here is going to be reflected here so if I come over here let's see I'll just need to restart my sir let that run so whatever value I have in the state is going to be reflected here and we can see that as when this loads I'm going to try typing in the form and it's not going to let me because it's going to have what I have here so if I have dog dog is going to show up and I need to upper upper cases area for my import to the uppercase form expected a string oh we need to export default that's very important too so our component can actually render okay so you see the word dog here and I'm trying to type I don't know if you can hear me typing but I'm trying to type and it doesn't let me and that's because well we said the value is equal to levers here right and the value here is dogs who won't let me change it but if we wanted to change it what we would need to do is create a non change function and on change function passes a variable called event back or parameter that you can use and a target value is going to be whatever the user just typed with the current value is so what you can do is you can say this let's move over let's try actually drop down a few lines isn't easier to see so on change this dot set state so this will update the state and we could say first name is equal to e dot target ah value all right so now as I'm typing in this you can say dog and type whatever I want and if I were to go to inspect this element now I have the reactive tools which allows me to look at the component I can see the value you can see the state updating so and that will help us when we submit the form okay so this is one way to do on change so I could copy and paste this right three more times and I could change this to last name and we have to put last name here last name here and what is this user this one is username username username and password start actually you know right you can fill out all the fields this way but I'm going to show you a better way to do on change then just you know typing all this is this is a lot of duplicate color right I mean it's not a ton this duck said state you know but what if you to add maybe some middleware or just something that runs every time as this values updated nice to have a function that basically extracts us so just to show you guys this is working we can color here type stuff and everything types okay which is expected right how do we actually submit this form and see the values well before we do that I want to show you another way so on change works just fine like this but we can create our own change function I'm going to call it change which accepts E and does something kind of cool so what we can do is instead of specifying here we can say is give this a name value name being first name and notice how the name here I want to match up with the name in our state what this allows us to do is here I can say this dot set state and I could say e dot target dot name is equal to either target value so what we're going to do is now instead having this here we're going to say e this dot change pass en so now notice it's going to grab what the name value is here and put it here so when we pass en to change it's going to call this function here and it's going to grab like I said the name value put it here so it's going to say first name is now equal to the new value so now we can just go down this right and just simplify it so now I have last name and I figure out the changes please there's just two placeholders ok and we can get rid of you and now e dot this dot change and it does the exact same thing right we could keep the other change if there's nothing wrong with doing itself this way it's just a little bit less code a little less duplication right if you wanted to change stuff so user name copy this come down here do it for this for this name equal to email and then name password and we also want to do type is equal to password on this field just so it's hidden okay so how do I submit our form right and actually get values use it do something with it maybe call an API or whatnot well what we can do is we can create a button here we can call it on I think on click not on submit so on click what we can do we can call a this dot on submit and now on submit is a function we're going to create here and we can just add it to our class so submit button so over here we can add our submit so I can say on submit and we're just going to console dot log this dot state so we can see the values what allows to do you see the values of when we submit everything and we could possibly handle it now I also just want to put some line breaks here so our form is just separated a little bit on your lines alright so ABCD ALP I submit this I don't know if you guys caught that for a second but what actually happened is it print it to the console refreshed and you'll notice how the URL now looks like this and it passed all the values that were here up here now that's just like the default behavior for when you have a form using this form thing using the form tag if you don't want that to happen what you can do is pass the event parameter so on click here we can pass in the event handler and then we can say e dot prevent default and now the page won't Auto refresh and put all these all this junk in a URL right so if I put ABCDE F you'll notice we just print the object out we have all the values and now let that allow us to do is we can actually you know from this we have this web state we have these values we can do whatever you want with it maybe our form maybe our app up here wants to use these values so what we can do is we can say to stop props dot on submit now the onsubmit here is going to be different than here click on props props we're going to actually pass here to the on submit we can create a function that takes maybe some field and we're going to do something with it so on submit and field and then here we can actually say this dot on submit' field now you can see we have tons of on submits this to onsubmit refers to this so we can say console dot log app component got and then get pass in the field site you guys got now coming over here we can just pass in this dot state so now if we rerun this I can put ABCD we could submit and look our app got those values so it can do stuff with it so let's see what some say different things we can do and also before we do stuff an app what if we want to clear after submitting you can do this dot set state and then set all the values to be empty like this so now when you submit it'll actually clear ABCDEF run and you can see that now what we can do is we can get fancy and we can say state of our application so we're getting we're in the just has our form here we can say field is equal to an empty object great but then we can save this set state field and we can actually do stuff with it now we can render it we can say we can just show what the fields we get here so json dot stringify because this is an object and if you put null comma two it'll actually format it nicely and put that in a paragraph tag so now we can see what you submitted on the screen field oh this needs to be this dot state dot field so it'll be an empty object at first then when we submit it'll populate so ABCDE and I submit and bam look at all the values populate there now we can even take this to the next level and we can actually do this kind of real-time as we're typing in the form we can get stuff to populate so instead of you know having an odd submit maybe we have an oops in an on change and then we call this on change and we call this on change so every time there's a change in our form of an updated fields and show it here so in our form here we can actually get rid of our on submit for props then our change here we're going to say this props dot on change and then we can actually pass in a target dot name just like we're doing for our state here impasse in the new value valley so not only are going to pass it to our state but also to our app up here so now it's going to get the values right but notice how we're not getting fields anymore we're actually just getting one value so updated value so we can just pass an updated value here and it'll go ahead and update our field I think so a be okay it didn't work let's see what we did wrong so we have on change here stop props on change should be called and then set State updated value so it actually needs to be filled right because we need to add this to the field value we need to unpack this too so we have to set the state of fields because we're updating fields we're adding the new value we also want to keep the original values that are in fields already so we're going to say this dot state dot fields so just to recap with that this thing is doing we're going to set the state we're going to keep the values that are originally in fields we're going to grab that new updated value and put it in our field all right so now as I'm typing Bob Martin BM BM @ BM comm and then R my password so as we're typing we can actually see it update live in our app right here so it's pretty cool and then if you want to click Submit it all clears you'll notice it doesn't update here that's just because inter on submit we don't call on change so if we wanted to we could say this dot see how we're calling the stock set state we could also say this stock props on change and now when they're submitting it will clear everything and now everything is clear so you can type more stuff clear more stuff and do the whole nine yards that is it for this video guys that time and liking doing forms it's a pretty lightweight the basic crux of it is we have a change function here that lets us set the value of our state and we're just setting keeping the state here passing the value in having on change for our input and then we just handle the submission with an on-click here with our button we could handle stuff in our on submit do whatever you want when the form submits redirect page give it to another component all kinds of stuff we can do so I'm really liking this method of doing forms instead of doing using library just lightweight and you don't need this like works very well you don't need some other stuff so that's what I've been doing lately thanks for watching guys let me know if you have any questions or any troubles setting this up I'd be happy to help and I'll see you guys the next video you

Channel: Ben Awad

Views: 95,028

Keywords: react form, react, form, how to code form in react, how to create a form in react, how to make a form in react, how to react form, react form tutorial

Id: qH4pJISKeoI

Length: 19min 40sec (1180 seconds)

Published: Sat Jul 15 2017