my name is Navy and army and I'm your instructor today. I'm going to teach you how to create form elements in react and how we can get their value. Basically there are two types of farms in the act when it's controlled and second is uncontrolled today we're gonna touch based on control components only to start with. I have already set up a chord with for our react application And it is currently running on our local house over 3000 to run it again. You can just simply the terminal npm start, it's over here. Now assume that we already know how do you states in react? So I'm gonna use that. Um I'm going to use that for adding farm inputs and listening to it first let's set up input type text Yeah. And that type is text and we will close it. So in react when you don't have any content between the open and closing bracket and you can just closet as itself was impacted. That's the and then I had input of type text like this that's like this was intact here in the act because the input element doesn't have any content between the opening and closing tag so we can and should write it as a self closing tag and react now we get our input. We now do need to submit pattern and before I add us some red button here and others said lick me next we want to gather the user input on every keystroke and we can control it on the bottom click to do that. We need to add a listener input element. She's going to start from on we have multiple different listeners we can whose own things here. Through there by adding a prop started on because it's going to trigger on every keystroke Right? And then we need then we need this not to point at some function right? Which should be executed Whenever this event occurs basically whenever we type something, whenever this input changes, that function should occurs, that function should execute. So I lead a new constant. Mhm The name name venue handler to make it better. Mhm To make it clear this will be called upon to make it clear that this will be called upon. I had the I did with the I ended it with the handler because the function retail store here should be executed whenever this name input changes. Now we point this function to our prop you really handle as it is and you want to get it changed value every time when we tied something they'll get this automatically and you will get an automatically and even object which describes that what even has occurred. This is the GST fault behavior you get when you listen to the events in browser. Now in this function we get a target free right event thought target field. The target still contains a lot of keys and one of the key is really value which holds the value whatever we're going to type in the simple text, it's going to hold this value in this object. Mhm recommended for now. So now we want to store this value when we click. So let's say for example when we want to do any epa correct we want these value revolve this input type value and this is why we're gonna use sub state in the act so we can import it was uh state and making this concrete call it here the empty function and with empty input string and then we can deconstruct then we can reconstruct this you state 22-11-1 is value. We call say mean value. No that is set name value. This is a function. It will be used to update our state and that's why the naming convention have named this uh started name the set. Mhm. Now here when we call this function, when we are going to write anything we will call this set name value function here. These values. So current value can be stored in another state. Now say we saying we will create up on handler another brother. Sorry. Yeah ethnic creator another from Shin here let's name it on submit um points is consummate to this even panda and simply just consoling the look of our state. That's let's see in this election. Have already open my console window we have this input type and we have this button here. That's right. So this is input and then quickly we'll get this input value with our state. Thank you. This is a small demo here. How we can So this is a small demo. How we can get the form elements, how we can create form elements in react and get their value. Thank you.