Complete React Tutorial (& Redux) #9 - Intro to Forms

Key Takeaways

all right they're my friends so a big part of most websites is user input in some way shape or form whether that's on a contact form or updating a profile page or writing on a message board and we need a way to work with forms and the data that a user inputs within react so I'm gonna show you how we can do that or rather introduce you to how we can do that so you can see already what I've done is stripped back our component in templates so now all I'm doing is I'm storing these on the state still and I'm just outputting h1 here to say my name is this dot state dot name and we can see that very simply in the browser right there so all this is very simple at the minute now what I'd like to do is create a simple form just a single input field where a user can type in their name that's going to update the state on the fly and update obviously therefore where we output it as they type in and then when they click on submit it's going to log their name to the console all right so then let's get started with this form underneath the h1 over here we'll create a form tag first of all and close that off now inside the form tag and make sure you spell that correctly we want just a single input field so let's say import the type is going to be equal to text so type text and then we'll just close it off like so all right now underneath we need a button and this is going to be a submit button like so all right so that's how a simple HTML or JSX for the form very simple like I said we're going to type a name in here and then we're going to submit it and as we type in here I want it to update on the fly over here all right so then how do we do that how do we detect when a user is typing inside this input field and then change the state the name over here based on what they type well pretty simply we use an event so we say on then the event name for this is change and this fires every time there's a change of value inside this input field so every time a user types a new letter or deletes a letter etc so we want to equal that to a function that's gonna fire every time there is a change but first of all we need to define that function so let's call this handle change and remember we're going to use the state inside here so we need an arrow function so we can get the value of this inside the function so remember to change the state we say this dot set States because we're going to change the state every time a user changes the input field right so this dot set state and inside we want to change the name property but how do we get the value of whatever the user has typed in here because that's what we want to change it to pretty simply we have access to the event object so we can say E and we can grab the target element which is the input for your by saying e dot target now on this target we have a property called value and that is going to get the value of whatever is inside this input field at the moment that this function fires this handle change function so every time a user types it's gonna fire this it's gonna set the state and change it to the value of whatever is currently inside this input field does that make sense all right so let's give this a quick whirl will reference the function down here this dots handle change like so save it and go over to the browser and I'm going to change this to Yoshi and you can see as we type over here is updating on the fly in the browser over here where we output it as well so that's cool that's all working that's how we keep track of what user is typing into an input field all right so now the next thing we want to do is react when the form is submitted either when a user clicks enter or click Submit because at the minute the default behavior is just to refresh the page we don't want that we want to take the value of the state the name in the state and log it to the console so first of all we need to go over here to the form and add on an odd submit event handle all right now you might have thought that we do an on click here now that would work for when your user clicks on the button but not when they click enter because an end also submits the form so by doing on submit instead up here we're capturing the enter if a user clicks answer to submit or whenever a user clicks on a button inside the form as well so that captures both of those all right so we need to define the function which is going to be called when a user submits this form so let's come under here and say handle submit so that equal to an arrow function take the event object and inside here we want to first of all prevent the default action of a form being submitted now remember when we submit a form the default action is for the page to refresh I can type a lot of stuff in there submit the page refreshes we want to prevent that default event behavior now the way we do that in JavaScript and this is just normal JavaScript is by saying e dot prevent default and now that is going to prevent the default behavior of the event being submitted ie to prevent the page from being refreshed so first of all we need to reference this handle submit over here so we can say this don't handle submit so reference that so now when we submit the form over here we can type in a lot of stuff Yoshii and then press submit and nothing is log to the console but at least we prevented the page from being refreshed now all right cool so the next thing we want to do is log out the name to the console so let's say console log and we'll say farm submit it like so and then we'll also log out this dot state dot name so if we save that now and come over here to the browser I'm going to type in Mario and then submit and we can see farm submitted Mario cool so there we go that is your introduction to farms we are going to be working with farms in much more depth as we go through the rest of the course I wanted to give you just a little primer now so that when we come across them later on it's not brand new to you all right so I think a lot of the basics of react have been now and we want to take it up a notch so in the next tutorial I'm going to show you how we can use create react app to create a full application so that we don't have to have our components in a script tag down here but we have a full react settle for a full web application so I'm going to show you how we do that in the next video