Now that we have learnt about forms and controlled components in react and how controlled components can be used to control the forms in react. Let's move onto this exercise where we will see how we actually implement controlled forms inside a controlled component in our application. We will implement our form in the contact component, and so, going into the contact component, let me import a few more components from reactstrap that will enable us to implement the form controls. So, let's import Button, Form, FormGroup, Label, Input and Col. Then, since we need to store the state of the form in the state of our react component, we need to turn this component into a class component, and that's the only way it will be able to support controlled forms. So, let's go ahead and turn this into a class component. So, to do that, first, let me import react component from react, and then go in here and then turn this into class contact extends component. When we do that, the return value should be enclosed inside the render function. So, let me implement the render method here, and then let's go ahead and cut the whole code here in the return and then put it inside the render function here. So, with this return component is now upgraded to a class component, and so we can now store the state within our component. So, to reflect the state into our component, let's go ahead and instantiate the constructor for our contact component. So, in the constructor, we'll say, super, props, and then, let's define the state which reflects the information from the form that we are going to create here. In the form, I'm going to have a field for firstname, which I will initialize to empty lastname, which also is an empty string at the moment, telnum which stores the telephone number, also has an empty string, email also is an empty string. Then, we'll have a Boolean called agree, which we will set to false. Then, contact type which we will set to 'Tel'. This will be used for a select form control, and we'll see how we make use of this in a short while, and then, message which will be also an empty string at the moment. So, with this, we have set up all the properties within our state that can then be linked to our form. So, let's go ahead and implement the form. To implement the form, let's go down below here in the contact component. So, we see that we have, inside the container, a div here. So, inside the container div, let me go ahead and create another row, and inside of this row, they'll implement the form for us, so say div. So, inside this column, we'll implement a heading for our form, so we'll say, send us your feedback. Once we have that in place, then we can go ahead and implement our form here. So we'll say, div col-12 col-md-9. So, inside this next column, which will be stacked below anyway, below the same level here, we'll implement our form. So, to create a form, we will start off by defining a form within this div here, and in this form, we will create the various elements of the form. So, we'll say, FormGroup, if you have taken the bootstrap course, you understand what a FormGroup is meant for. The FormGroup allows you to define that as a row here, so this is one row of the form here, and then inside here, we'll say label. So, this FormGroup row allows us to use bootstrap's grid inside the form to lay out the various form elements. So, that's why I'm applying the row, and inside there we can apply the classes to this to implement that. So, label for, so, we'll create our first form element here, and that will be for the first name, and then, when you say md is equal to two, for medium to extra large screen size of this label will occupy two columns in this row. So, from your bootstrap knowledge, you can understand what this is doing, and then I'll say, first name label here. So, that creates a label inside this FormGroup. So, the label will be position to the left in the FormGroup and then to the right of it, we will position the input box for inputting the information for our first name, and also again, here I'm taking the help of reactstrap form elements. So, we'll use the FormGroup which is reimplementation of bootstrap's FormGroups. Then, in here, I will use column md10. So, this specifies that for medium to extra large screen sizes, this would form a column. So col in reactstrap is like saying div class name is equal to col-md-10. So that's condensed into this format using the reactstrap col component here. So, inside of this, I will design my input. What kind of input is it? If this is of the type text input, so we expect to use it or type in the text here. I'll give this an id as firstname, and then name as firstname, so that this will tie itself to this label here. So, this should be htmlFor. Now, if you use simple for here again because this is going to be JSX. The simple f-o-r, for, will be confused with JavaScript's for, so that's why we'll have to use label htmlFor here. So input text firstname, name firstname, and then we'll say, placeholder. First name and we will tie this to the controlled components state. So, will say this state first name. So by tying this value to the control components state. Now this becomes a controlled form, so that any changes here will be reflected in the React components state here. So that is the input here. After having done this, let's go and take a look at our form in that, but I was going to browser in the contact us page right below here. You now see our form taking shape here, So I say Send us your feedback and then first name and the input box here. The first in here. This one is laid out using the bootstrap or rather React straps form grid support. So this is occupying two columns here, this occupying 10 columns. There's a first name. Like that I will lay out the last name, the telephone number, the email, and other fields here. So, we'll complete the form step by step. And then once we are done with that, then we will tie these forms control into our React straps state there. Now, just like we had the first name, I'm going to create the next one which is the last name. Yes. So we'll go to the next one and then we'll say, last name and edit this to last name. So, remember to change all this to last name and then, we tie this to the state value of last name here. Similarly, the next row would be for the telephone number. Which I'm keeping it simple. I'm just going to allow the user to type in the entire telephone number in a single box there. So will say label for telnum, md two and then this would be a contact telephone number, and the input type is tel, so they get to telnum and the id is telnum. Name is telnum. And then the placeholder would be telephone number and then they tie this to the telnum state property. Telephone number. Let's do the next one which is email. So, the next row would be email. So you see that, we can create various form elements like this and then let's see the changes and take one quick look at that application in the browser. Going to our browser, you can now see four things in here. First name, last name, telephone number, and email. Lets add a couple more. Those were fairly straightforward. The next one, I'm going to add in a checkbox and a select control into my phone there. So let me go ahead and create this as a FormGroup. So inside this FormGroup let's create a checkbox control here. So in some FormGroup will see call md. Now, I can even specify the number of columns by saying size equal to six. As a JavaScript object inside that braces there. And then I can even specify the offset for that. So, what this is telling me, is that this will occupy six columns, with an offset of two column. So for this particular row, I don't have a label but I need to push all of this to the right, within my form so that's what we are doing here. So column size offset to this one, and then I will create one more column down below here which occupy three columns and then an offset of one. Now, within these two columns, let me implement what I need. So within the first column, I will implement a FormGroup check. So this is for a chat box that I'm going to implement here. So for the checkbox, FormGroup check, and then we'll say label check. So this is how we have implement the FormGroup for a checkbox with a label here. So I'll say input type checkbox. You know what a checkbox does, then name is agree. And for this one I will tie its property value check to this state, agree. Then after that, let's give a one space here, and then we'll say maybe, contact you. So this is just a label that is following this checkbox, so that the user understands what this checkbox is asking you about. So that's a checkbox there, and then in that second column here, I'm going to create a select control here. So we'll go into the second column and the will say input type select. So the name is contact type. And the value will be tied to this state contact type. Inside here, we'll specify the options for the select. So, there are two options for the select. So we'll say option. Tel and Email as the two options. So, what does this add here? So, you can see that this is a check box with the label there and then this must add the select. So let's go and take a look at this. Going to our application in the browser, you can now see that they have added a checkbox here, which currently we don't know how to handle this yet. We'll do that in the second part of this exercise and then you'll see select here which allows us to select between two options, Tel and Email. And by default, it will be Tel, here. Now, continuing with our Form here, we will add in a another FormGroup here and that will be of the type text alias. So, I'm just going to copy this email thing that we have here and then use that to construct this FormGroup. So, in the next one, we'll say FormGroup row labeled htmlFor is feedback and md 2. And then here we'll say, Your Feedback. So, we're asking the user for some feedback about whatever it is that we ask the user to submit. So, the input would be of the type textarea. So, that it could be a long box here, a large box there. There have been multiple rows, so that the user can type in a lot more information here. The id is, feedback or rather we'll call this as message and the placeholder is, we don't need a placeholder for this, we can just put a blocks in there. But then, let me set the number of rows of this textarea to 12 rows. So, we'll give 12 rows here and the we'll tie this to message here. Then the last FormGroup that I'm going to add is a button, the submit button here. So, for the submit button, let's go ahead and add a row here. Inside this row, let's say column md size 10 offset 2. Then, this would be off the type button, which is the submit button. Color would be primary. So, blue colored button there. And then for the button, we'll give the text as send feedback. Now, that we have completed the Form, let's save the changes and take a look at the complete Form there. Now, going back to our contact page, you'll see the completed Form here. So, you can see that you have four fields here, and then they have the checkbox, and then you have a textarea and then the button here called send feedback. Now of course, when the user clicks on the button, you want to be able to retrieve what the user has typed in this Form and then be able to see that. So, since this is tied to the state of the React Application, the submission of the Form should be handled within the React Application. Not only that, whenever anything is changed in any of these elements, that should be reflected by changing the state of the component to reflect whatever is in the box here. So, we will implement two different handlers that will take care of handling this Form here. So, to do that, let's go back to our code. In the code, we will implement two different methods here. We'll say handleInputChange, which will receive the event as a parameter. That is one. Then we'll see handleSubmit which also receives the event as a parameter. So, when you click on the Submit Button, the handler Submit should the called. Then when the Form is submitted. Right now, what I'm going to do is I will just log there Current State, which reflects the state of my component anyway. So, inside here we'll see, we'll just log the state here, nothing more than this. And also, we'll generate in alert with the same information so, that the user sees that the Form has been submitted. The default behavior when you submit a Form in any browser is to go to the next page. So, we will prevent that from happening. So, we will say the event.preventDefault behavior. So, this is how to handleSubmit is implemented. So, how do we make use of this handleSummit? To do that, we'll go to the Form here. For the Form, whenever the Submit button is clicked, the onSubmit. Attribute is tied into the handleSubmit function like this. Now in addition, now, in order to make this handleSubmit method available for use like the way we did with the form, we need to bind this in the constructor. So, here in the constructor, we'll say, this handleSubmit is this handleSubmit bind this. We have seen this already in one of the previous exercises why we need to bind this. Similarly, while I am here, I might as well bind the handleInputChange also. So let me just copy that and then paste that into the next line, and then we'll just say, this handleInputChange is this handleInputChange bind this. So, these two are required in the constructor of that contact component. Let's save the changes. Now going to our browser, if I try to type anything into the forms, nothing is shown in the box here. That is because when I make any changes to the input box, this is tied to the state of my controlling component. Since any change that I do to the input box is not reflective into the state and since the value of each of these is tied to the state of the application, that's why I don't see anything being reflected into the forms here. So, how do we tie these two together? So that is where this handleInputChange method comes to our rescue. So in the handleInputChange method, we'll make sure that this is invoked upon any change to any input value in our form. When this is invoked, then we will retrieve the target input from the event that has just been parsed in. So this event will carry which particular input has been changed. So after that, we need to check to see. So we'll say, const value is target type. So if the target type is a checkbox, then we'll have to change or retrieve the value from the target checked otherwise, we'll retrieve the value from target value here and we'll retrieve the name of the particular input that has been changed from target name here. So event target type, event target name. So since we have done target is equal to event target, we're able to do target type or target name. So if it is a checkbox, then the value is retrieved from the target.checked otherwise, the value is retrieved from target.value. So as you can see, when we tied in the input boxes to the form state, we either tied in the value or the checked appropriately. Now, since we know the particular input box that has been changed, so from the name we'll retrieve that, and the name is also the same as how we defined the state properties here. So, remember to make sure that the names that you give to the input box will be the same as what you use for the properties in the state. So that the way, all that you need to do is here, we'll say, this setState. So at this point, any change that is done to any of the input boxes will result in either state being changed. Whose state? The state of the particular input that has been modified. So that's why we'll say, name, value. So remember, we got the value from the input that has been changed. So if it is a checkbox, we get it from target checked. If it is another kind of input, then we get it from the target value. Then that value, you will set that particular state property to that value here in the handleInputChange. So this way, any change that you make to any of the input in your form will immediately get reflected into the state. Now, how do we tie these two together? So to tie these two together, in your form for each of these items, for each of these inputs, I need to tie the onChange to this handleInputChange, so onChange. So whenever this input is changed, any change is made to the input, then this will result in a call to the handleInputChange, which will reflect the change in the input value back to the state of my form there. So, I will add the same thing to all the forms inputs here. So, lastname, telnum, email. I forgot to change that to email. So, if you notice any errors in the way your form is behaving, it could be that you might have forgotten to change these values to reflect the correct value here. So that is one place where you can go and look to see if that is where you made a mistake. For the checked here, we'll also say, onChange inputHandleChange. Then, for this one also, the contactType onChange for the text area. So now, your form is all set up to immediately reflect any change into your state of your application. Let's save the changes and then go and take a look at our form. Going to our contact component, let's start typing in some value. Let's type in some random value here and then submit by clicking on the send feedback. So when we click on the submit, immediately you'll see an alert box pops up, and this reflects what the state in my React component is. The state here in my React component is exactly what we typed into the form there. So now, you see how with a controlled form you're able to submit the information to your React application and then within the React application, you're able to handle the submission of the form. Also, by tying in the value of each of these inputs to the state of your control component, you're able to immediately reflect the change in the forms into the state of your application. Let me click on the okay, so that I'll dismiss the alert there. With this, we have seen how our application can be updated to include a controlled form in one of our components. This is a good time for you to do it; Git commit with the message controlled forms.
