Hello everyone. My name is Marvin Journey and I'm your instructor today I'm going to teach you how to create form elements in the and how we can get their value. Basically there are two types of form elements in react. One is controlled and the other one is uncontrolled. So today we are going to go over only the control components to start with it. I've already set up a code base for our reactor And it is currently running on our local host over 3000. So let me stop it and if you want to start this over again we just need to write and start in the terminal window and here you can see our server reasoning. So now I'm gonna assume that we already know you state hook and I'm going to use that who care for adding our form inputs and listening to it. Right first let's set up a input type text let's remove this and input X pair. It's a self closing back react because the input element doesn't contain doesn't have any content between the opening and closing tax so we can and we should write it as a self closing tag. Okay now we get our input now we need us to submit button. Therefore I'm Gonna Add one Button here. What martin and I'll name it, click me next we want to you know we want to gather the user input on every keystroke and we can then console its value and we click on our button to first get the value of input. We need that even listener even listener we're going to start with on and we can use here. So basically it's a prop and this drop is going to trigger on every keystroke. So now we want to point this point this prop to some function. Right? So whenever we type anything, that function should gets executed. So I'll create a concert and name it name do and that to make it clear I have to make it clear this value will be called upon. I ended with handlers right? Because the function which I'll store here should should be executed whenever these input changes. Now we're going to point this function to our drop. Okay. And one thing we will get this even automatically whenever you know whenever you uh click whenever you type something in this input. So this is the J s default behavior you get when you listen to the events in your browser. Now in this function will have even brought and this target will contain a lot of keys. And one of the key is very lucky which is going to store the value whatever We're going to type in the input. It's going to store its value in this whole object. Now let's commend it for now. So now we want to store this value when we click right, for example you want to call an Api and but and then you want to use that state first you enter something in that input. Now you want to call that with that input. So you have to use that state. Right? So to do that we are going to use use the book. I'm just for good here. The state from the act and just going to call it here also basically input string. Now let's reconstruct this use state. So the first will be these first element will be simply a state. We can name it name value and the second can be certain in value. So the second function is gonna use to update our state right? And I'm following your convention here that I'm using step in front of our function name. So now we whenever we you know enter something in our input we can just directly call this set name value here. This object because in this object we have our updated value. Right? We have our function here for which is which is blinded with this input. Now we need another function which we are going to bind with somebody better here. Let's name it submit handler and I'm gonna use her arrow function. Let's create up hander in this button. Also I'm going to use on click here because we are going to click click that button and pass that function name here. So whenever we click this button, this function will run and for now let's just control our on value. Right name value. So now our code is complete. We have everything here we have input type text and button hair. Whenever we type something in our input type, it's going to call this function and in this function we are updating our state and when we click this click that button it's gonna call that function submit handler and the submit handler. Just console, the value of the state, whatever it is going to be at that time. Now we saved it and let's see this in action. So I've already opened up console window hair and this is my Ui to open this console. You just need to right click and inspect and go to console window. You can see your console dot here. That's right. Something in the input tag. Hello and like me, you can see that we have our state here. So basically this is a small demo of how we can use our form elements in react and how we can get their value. Thank you.