 Oh, right. Hello. This is Christian. So in this video, we're going to look at the react on control components. Okay. So the uncontrolled components is a type of components you put inside the form with the data we call the single source of truth, the actual data is maintained and the actual Dom like this pictorial here. So here we have a form in the bottom here, you have your input tags that uses a attribute called ref. This is not part of the Dom, the ref attribute is part of react attribute. And it binds to a variable called in this case username and email respectively. Okay. So out here in the back in the source, you would then create two variables called email and username and you bind that. To where you set it that to a what's called a react that create ref type of component. Okay. And so these two variables that now are synchronized will actually bind to this to feel stuff here. But the data, the actual data still is in the Dom. Okay, so the only way to get this data is through these two variables here. And you get that by accessing them this way. So each of these variable has a current attribute, and then that current attribute points to the value, which is the value of this element. Of course, you can also get it to the event too, but that's the just the normal, you know, way, using react method you can use it this way to access the data. Yeah, I'll show you what that's current why that's why the current is here and what this why is it there. Right. So this is how you know it was set up in one example. The other one up here is. Okay, so again some notes. When is a component, an uncontrolled component, how do you know which one is a controlled, what is not a control. So I put some notes in here saying that any input tag as soon as you bind that input tag the value attribute to the state property, then that input tag becomes a control component. Right. So you bind that to the value, the other this data username, and then to make it work though you have to also bind call the unchanged function to update the data so you can see it in that other field right if you don't do that is is not going to work. If you don't do that if you don't include the change function here, then what is what it is is what's called a read only attribute and therefore you cannot make changes. Okay, so these two usually go together hand to hand like this. So that is a control component. The uncontrolled component is you don't have in binding to the state, like you see down here so notice the input. It's not bound to any value. The state, same thing down here. Okay, they are controlled by a ref. And so to get the data, you will get through the ref attribute. This will just show you that the uncontrolled component just like the regular HTML DOM. The data back coming from the view. Okay, if you hit if you see the source view if you print it out, you're going to see that what it is is that the event. Each of these attributes has an event and this type of event is part of what's called a synthetic event. Inside this event object, we have a bunch of other properties and one of these properties is what's called the, you know, the like the name and the ID and the class name and the current is also part of this as well. You can access through the current attribute I show you above. Okay, so here's an example of two examples how you can create a an uncontrolled component react. One is using the react create ref function like you see here for so first you would register a variable. In this case, I call it a username and the you register using the react that create ref function. The reference that is being ready to be used and order to use it in the in the DOM, you would then create a variable or I mean in your input tag or whichever it is doesn't matter what the input types. Then you bind that to here through the reference attribute and you set it to that username. Okay, so this name here must exist in the in the global space here. Either in the constructor or any outside of constructor that variable must exist. So it binds to that so you know, so we know where to get the data from. Okay, and then when you submit this form, then you can obtain the data through this variable as opposed to a target value right so you get it directly from this variable here. And you get that through the using the username that current dot value. Okay, you doing this method you have access in this way. Now the second way is what's called the inline arrow function. So notice in this example here, I'm going to create the same username. This time I did not create a variable at all in the global space or in the class constructor right. So you create them by using a callback function. So this part here is actually a callback function that looks like this one here right so I put here. It takes an attribute a parameter, it could be any any variable of your choices on the matter. And then it just has to be an arrow function. And then it will assign the variable name that it creates so this variable here it will be created dynamically and instantly without having to recreate above here. And then you assign that to the variable that it receives. Okay, so this function here is a function. What it does is really the input tag, the value as you type the value here. The value is passed to this function via this variable. And so you can set a global variable called user name equal to that variable. That's what it is. Right, so as you can see down here. When you access that you just use it because you know it exists right here. And so to use it you just can call it and then now that value and notice notice this way. You don't have the current property, because this username is already this tag. So this part here is the same as saying input that value. Okay. As different from this one here. This one here you see it says the username that current value, the username is the variable name current is the current tag, which is in this case this tag, and then that value. So you go one step further. That's that's a difference. All right. So that is how you use the uncontrolled in react. So let's go and take a look how this is done. So to create a very simple app, I'm starting a new one here. Now, when you start it out, you know, we give you this function component. So you have to use a state for component, which is a class component to retain data. So I want to change this to a class component. Okay, so very simple class. So we move that parents to react that component. Call that and then inside here you want to put this whole thing inside every render function. So you move everything here inside here. Okay, and you close it. Yeah, you close it down here like that. Oh, no, I did it wrong. The return. Let's see that's that they're wrong. Oh, one more. Okay, a lot of. All right, what's going on. Let's do it again. I messed up somewhere. I mean, very confusing. Okay. Oh, yeah, it was correct. Sorry, my typo up there. So it was correct. I have to extend after. Okay, very good. So this is the typical class component. And I'm going to create a constructor here. It takes the props. And then I'm going to pass the props that is super. Right. And then now, down here, I want to create a. That's what is supposed to show the other tag over there. Yeah, I want to show this one here. Okay. So yeah, here we go. What is that use. Okay, and just say that I'm not using anything here because it's going to create anything. So you could create state. Right. So let's create one so that I say create a state call username. And we just put here blink for now. Okay, so that's my state. And then down here, I'm going to create input tag. Let's put it here. No, actually, you know what, let's go straight to a form. Tag. And then set a form. I'm going to create a input tag. We can use that one there input. Okay, I don't need a name in this case you can but I'm not going to use the react on the dumb method. I use the react method. Okay, so I don't really need a name. I just need to bind to the F. And so here is going to be a username and create. So I'll call it inside my suit constructor. I'll create another variable called this user name. Assign that to the react that create wrap. Okay, you, you create this reference, and then you can use it in here. So it'll be this user name. So now it's bound to this component. This reference and then you can access it when you submit the form. So let's go down here to the bottom and create a button. Summit. Okay, and then your form you want to put on submit. And we're going to call it a function called this that handle submit. Okay, I'm not past anything to it. So up here we'll create a function called handle submit. And you can put it here if you want. I'm not going to use it. Maybe you should. Yeah, but we're going to do a prevent default. So we don't want to load the form. When you click the submit form like this, you notice that it doesn't refresh. Remember you do that. Okay, if you turn that off, you see if I click on it, you will clicker. Right. We don't want that. Okay, so we make sure that is turned off. And so he does not load. Oops. Okay, let's remove that. Perfect. So now, when you submit the form. When you're everything here and you're ready to go, you click submit, and then the data is kind of come to this function. And then we're going to store the data from going to get data from this variable here. Okay, so just to show you that it does work. It comes along that to, you know, yeah, let's put it outside here so we can see right outside of the form. Let's put a div down here. Okay, so I'm going to put here a output. And then this is going to be bound to this user name that current value. Okay. And it says, okay, this little tree because it says I was fresh again. Okay. Crash because this is a no property. That means that when you load this page, right, my variable here is actually no because I never updated yet so this is no. And, and usually, in this case, you put a question mark right here. It's called a what do you call that one. It's like a safety type of thing. That means that if it's not know that don't put anything. Okay, so we'll see what this one does. All right. I don't think it'll update, but we'll see. And so when I click this something have with some ABC here. I want to put the data to right here. And also to the console. So as you can see, didn't work myself up here. And to see the data because we never rendered the dumb, because there's no change we never touched a state, right you don't see the output. Okay. And so to do that, you have to do something like a set state, just so we can see it. Probably the username is equal to going to change a username. And we're going to create, we're going to get the username from there so put. Yeah, username is going to be assigned to the that this username that current that value. Okay, so again the data is bound to this input tag via this variable, you get the data from this tag through the username that the current that value. Okay, this is synonymous to saying like this, if I do like you know if you do like the always you know like const. So input is equal to document that get ID. If I pull it for example, if I get ID like this. Like input. Okay, so input here. And how do you get the data is Oh, come on console log input that value. Okay, this is synonymous to this whole thing here. Okay, and we'll see if this is true. So if I do something like this. Right. And when a submit is going to output the data and put here is the same idea, but of course we're not doing the dump this method I'm just showing you that this is how you get this data from here. Okay, and so why is it like that. Well, we can do this, we can do a show you console log. Okay, watch this one. I click submit over here. Let's put Apple here, submit. And I suppose a console of that. Oh, I did not do handle submit. Let's see this handles submit. Refresh this. Okay. And it's not for something. Okay, yeah, turn that off. Okay, so here we go. Right if I put a right you see that the data, this data here is this one right here. Okay, I'm getting that out through the traditional way of getting the dump value. Okay, so notice when I log this out that he here is this guy right here this is a synthetic base event. And this event object, making a little bit bigger. You're going to see, if you expand that you're going to see that one of these right has a. It has a target and set a target you have all these attributes right. So all these are part of this with the element here. And and that's how you get this information here. Okay, so this is like the traditional way to get us to those data. So again, when I'm going to go, they're going to get to the object. Okay, so I just want to show you. So you get it through this current object. And you get the data from this variable assigned to the state you change the state so that it will, you know, update the state so we can put the data with the data out here because we're going to open the data down here. And I'm sure if it shows up or not. We can see the updates that because, you know, we touched the state right here if you did not do that, you won't see this change. So that's how you load data when we move this again, we have you want recap one more time, make sure it's clear enough. So in your form. Okay, your input tag binds to the ref attribute let me delete this very short and clear this week. The ref attribute binds to a variable, a variable must exist and your global space, either inside the constructor like this, or outside of it if you put outside like this. It's just remove this like that. That's fine to it doesn't have to be inside the constructor, but usually put inside it because it's just cleaner that way. So as you can see, we bind to this username. And then I will you submit the form you access the form would then call this function handle submit, and then you can get all your data from those fields. And then you update your state that way. Okay, you get the data through this object via the current property that value. Okay, doing this method you have to do that way. Right so again so if you say we go here you put like for example like Jack, Jake, and that's how you get Jake's data. Okay, and and same thing here. Right. Right so this is the actual data coming from the user current which is this guy here I did not call this from the state to check the state you can also put right here. We're here. You can compare. I'm just I'm just showing you here here. Okay, so if we stay variable with this that states that username. That's a state data. So if you type a right there again a call. Okay. So that is how you do it this method. Now, I'm going to show you the other method. And this is by creating a another field down here that's going to duplicate this line. See that. And I'm going to bind using the end line function okay call by function and we'll call it it's a cover function so it takes like the error function like this. You pass in a parameter. Doesn't matter where it is in color value is fine is value here will contain the actual value from this input tag pass it to this variable and set the body to function you will see that you assign that to a variable of your choice. I'm going to call this one here. This that place assigned to the value here. Okay, so this will like the username and the city of the place that doesn't matter. Maybe we'll call it city. And so it just bind to the variable. And then now this city variable exists dynamically in your code if you don't have to, you don't have to create it here. Okay, so I'm going to put this back in here. Okay, I don't like it. I'll sit here. I like it inside here because all together inside the constructor cleaner. Okay. So now, and then my state variable I can create one call city and leave it blank as well. So I have to probably put a city state. I think you want to submit the form again my city formation kind of do the same thing right. So when I update my username, and then I also want to update the city by going to this that city that value now this time. Notice I did not go through the current like I did with the other one. Okay, because the way I did it here is different right you if you calling through a callback function this way. You access the data just going to the city and then get the value just like the input that value directly like that because this city here is actually binds to the actual input already. It looks like that. So you just exit directly if you create it using this method and the ref just bind to a variable, you have to go to the current okay just remember that, and oh it's not like it's a lot but just remember. And then now down here I'm going to output this as well so you got the current value reported here and also put this that city, and then we'll put here question that value. Okay, so it doesn't crash. I think is not like it, or what if I do right. Yeah, because the city doesn't exist here. Okay, so yeah, this one will be tricky. Yeah, let's not put there. It doesn't exist at first. So there's no value here. This one I create a way to say it should work, but let's forget about that one. Here is that state that city. Okay, so I put here a and BBB and then you see that it works like that. Okay, so that is how you want to do using the uncontrolled component this approach or this approach, whichever is convenient to whichever you like. You know, sometimes it's maybe easier to do it this way. You can see what you can know right away. But again, give you that flexibility. Okay. Now, I want to just update this just a little bit. Now that we understand how this work. I'm going to go and update my state and my data limit. So let's say I'm going to store my data inside the state here not through, you know, to variable here but if I create something like this. So let's put here another variable, like, maybe data, and then binds to a state. Okay, so the data object has a city username and city in there. Okay, so the username here that is still here, but when you build your state, right, you have to have to update your, your data this way. And if this is case that you have to do a little bit different right I can just do this have to do like, let's see, like data. The easy way to do is you do this way. It would do const state, let's go user name is equal to have this user name so just copy this. We're here. Const the city is equal to this. Right here. And inside here then, you know, your state, you just want to do this. Okay, easy right so you put here const. Yeah const data is equal to this that state that data, you load the whole data in. And then you go data of the state is the name is equal to user name. And then you update the data that city is equal to city right, and then you update the data. Okay, this is one way to do that. I'm showing you I'm using a nested object inside here. I'm going to values, and then I load my local state a copy of the state, update the data and then update that right after that. And so now, hopefully we'll still work just like before. Okay. The city doesn't load because my data user name and city user name and city. See what's going on. Yeah, that's right. I just didn't put down here so this really data that state and the data city. Okay. So just one, one little step more because sometimes you have to use this way. No state. Sorry, all messed up data that username state. That is city. Okay. All right. So this is an example, another example, where you have a nested object and set another one. You know, if you, if you don't understand this way, make sure you review it because this is going to be very, very common. We have a key have the value of another object. Right. I could have data like that. And you have another one right. So you could be like, for example, another one here. Points and then we'll go to another object. We have, you know, Levels, another object. Okay. So all these are your states. So make sure you're comfortable with using multiple layers of object this way. Right. And then if you do it correctly, it's, it's quite easy to get those data. Right. So I do that I don't have any other one but you should still work because I'm up to it in this state. Okay. So, again, this is just showing you that I have a state called data. And that it is an object has two properties username and city. And then I create a username as a separate variable and bind to a field username for another one here dynamically called city bind to that input using a callback function. When you submit the form, you call this function here and you retreat the data from the username and from the city that value assigned to separate variables. You don't have to, you know, put this whole thing, like, you know, in here, right. Of course, you can you don't have to do this. You could just put this right here is fine too. Okay. I just put it is easy to see but you can totally do this. Absolutely. Right. As you can see. Okay, that's fine. And then, you know, get a copy of your state and update each of those properties and then update your state. Okay, I do it this way, because it's easier. Right. It's easier than you go in here and do like data that use a name. Right. And then, actually, I can do this. And then, you know, use a name and so forth. Okay, so it's really, it's really hard to do that inside here. Okay, so you have to do that and you call this guy, put it in here like that. Right. And then you do another one. This is the hard way. Okay. No, send you can just put city here and then finds to this guy here. Put it right in here like that. And then by doing this way. I think they're wrong. I need another curly like that. Right. So this way that I don't need this whole thing. Right. Okay, so as you can see, if it's correct, it should still work. Right. So lots of ways to do it. Once you had gets your, your head around this is, you can see how I did the whole thing here. Right. If it is, is, is hard to see, do like I did earlier. It's easier to do that way. Okay, so that is all for this part. And then I'll see you in the next video.