 All right, hello, this is Christian. In this video, we're going to take a look at data binding and react. Now, data binding is, as you see here, it's a mechanism or process of managing the flow of data from one point to another point. So just like many other frameworks, react the similar way. So we have what's called a one-way data binding. That is data going from the component, or we call this the source, out to the template, or the DOM, or in this case, it's the view. So going from the source, out to the view, like you see here. So one-way binding. And the syntax using react is very simple. Just one method, the curly brace here. And then the expression here is whatever the value you put inside here will be interpolated, in this case, interpolation. Or you can also bind to the attribute. Attribute here refers to either property, attribute, class styles, and so forth. So very similar structure here. On the right side, it's just an example to show you how you can bind to a class. Remember, then react, you have to use the class name as opposed to a class and the attribute, because the class is the keyword. And then you bind a variable to that class. And here's the same thing. You're binding to the actual DOM, just displaying something to the user. So from the state, you have a user property, display that here. So this is one-way binding flowing from the source. What that means is that if you make changes to the source, then your data in the view will be updated instantly, assuming that you're using a state for component. If you use a class list, a function component, you're not going to see that change. The other way is also one-way binding. This time, data is coming from the view into the source. So in order to do that, you will have to bind to an event. In event will be things like unchange, unclick, mouse enter, mouse leave, and so forth. So when that happens, you trigger a function call, and you will call a function, either a function, or you can update the state data directly right in here. This is an example of using a function to update. Actually, this is probably not correct. You should not put the parent here. It's just a list update, and that's all. Like you see up here, an example would be this handle user if I make some changes to the input tag here. And then you will handle that in a function to make the change. And two-way binding in React is not as handy as it would see in the view in Angular. They had a way to do that. It's called linked state. I forgot what it's called, linked state mixing or something. But I think that's been deprecated. And so they resorted back to using just the almost like the traditional way of doing things. A little bit different, but it's still almost the same. So in two-way binding, you go in either from the view to the source to the view, or you can say source to the view to source, as a matter of how you say it. So you have to use two things. You use the regular expression to bind the data one way out from the source to the view, and then you will use the event to send the data back from the view back to the source. So it's a combination of both of these here. So here's an example of this. Same thing here for make changes. Notice I'm binding the value from the source out to the view directly to the value attribute and the input tag. And they want to make any changes to this input. I'm sending the data back using a function to handle the change. And then you update that inside the beat in the source. So that's how you do in a React. Down here, it's just kind of similar to what I just posted above, different ways where you would use the binding. Again, it's very simple in React. All right, so let's go and create an application just to do an example of that. I already have an example here. I call it pass app. But it kind of looks kind of similar to what we have for our unit component. So in here, I'm going to go right into the components. And I'll use the about component here. Notice this is a function component. Remember, a function is stateless. So you can still bind data. You're not going to see the change reflect right away because it's stateless. In order to do that, you have to use a class component. Or you have to use the traditional way of doing things like the regular down manipulation. But I mean, why would you do that? Because that's kind of defeats the purpose of React. So if you compare that to the app, the root model, this is a class component. So notice class has a constructor and has props. And then you have your this state properties in here. If you see this super with the slash here, just say that it's deprecated. But don't worry, I think it has to do with a conflict with the IDE as opposed to React. Yeah, React still uses super, OK? So it's not really deprecated. So just ignore that issue. OK, so over here, now I'll show you just a simple one. And let me see if it's still running. I think the app is still running. If it's not, let's run it first. Let's go to a terminal. And I want to go back out to app. OK, so npm start. I'm sure that's running. I think we will begin. All right, let me close that for now. And then I'm going to see if it's running. OK, so this is the one. Yeah, OK, so I want to go to the about page. And we're just going to modify this page to show some data here. And so go back in here. So I'm going to show you the one providing from the source. So the source will be up here in the function. And let's say you have a data called, I don't know, OK, let a dog is equal to all this. So that's the data from the source out to the view. And you want to display it right here. So we'll put p here. And then you put here dog, right? That's one way data binding. Very simple like that. And then you save it and go to the view. And you should see the change right here. OK, you know, let me make it this way. So it's probably easier right here. And so we can see right here, it's probably easier this way. OK, and I'll close this. And I'll make this a little bit smaller on this side over here. Let's do this. All right. OK, here we go. So we see that the oldest display here because it goes from the source out to the view. OK, and this works fine. Only thing is that if you make changes, it's not going to work. You're not going to see it. OK, so instead of doing this way and keep doing this way, I'm going to change this function component to a class component. OK, so you can see the reactive component right away. And so let's do that really quick. Let's just put here class and about. I think it extends. I remember this correctly. Extends, react component. OK, and then we're going to have a constructor writing here. And we'll pass in the props, super props here. OK. And then now I'll put the dog inside here as an object. OK, so I put, well, yeah, yeah, let's come with this up for now. We'll create a state. The state is equal to a property of the dog. All this, OK, and then another one for cat too. OK, cat, OK, so I have two properties in the state object. And then over here, I have to return, I'll have to do this return on the render function to put everything inside the curlies. So what do we do here? To the end right here. OK, so there's just my component now. It's a reactive component because now it's going to like this. And I'll clean it a little bit over here. It'll like that. OK, so the dog is no longer dog. I have to go through this.state.dog, right? As you can see, it's shown up here, OK? So it's the one-way data mining from the source out to the view, OK? So now, if I want to go from the view back to the source, then you would have to usually bind to an input tag, OK? So either an input, a select, or a text area. Only those three will actually collect data from the input to the source. So let's say right here, I'm going to put an input tag. And we're going to bind an input tag to it on change. And on change function, we'll bind to a function called this handle change, OK? So we're going to create a handle change in here. So in the class space, I create another function called handle change. It takes an event, OK? And then it's like here, I will bind the data coming from this input, OK, what do I put in here? It's going to send it back to the handle change. We handle that through the event object. And then I'll, you know, you can put here, for example, let data is equal to event, target.value, OK? The target is the actual element that's been targeted. So this is the target, and it's value. And then get that as second data. And then I'm going to update the data over here. So I'm using dog. So I'm going to update the dog. So again, we learned that you have to use this set state, OK? And then we'll pass into this set state function the actual dog property. I'm only changing that dog. I'm not changing the cat, OK? So we do that. And then now, because it's reactive, you have to bind this function, OK? There are a couple of ways to do this. One way is, you know, the way that we learn is to do in here, so you can say this, that, oh, not inside the state, by the way. It's at a constructor, but not inside the state. So this, that handle change is equal to this, that handle change, that bind, and then bind to this, OK? This refers to the state object, which is the component here. You have to do this in order to bind this data function so you can use this set state inside your function, OK? This is one way, and I want to see how this works. All right, so let's see. Did it work? Because it didn't work, huh? See what's going on over here in the arrow function. Hasn't here probably. Let's see. All right, it doesn't like my thing here for some reason. Let's see what's going on. It has a bug. Unchange is this. It's going out here, right? Excuse me. All right, see, I think I have some error in here. Extent class, not object, line 3. Oh, not children component. OK, all right, so let's see. Go back to the about, and all right, so here we go. You see that now, if I type in like TTT, right, it updates right away because the data is coming from the input, right? We handle the change. We call this function, and then we pass the data from the target, which is the input tag to the data, and then we update the dog to that. And then it render because we touched the property of the state. It causes the reaction to go back out to the view and make that state change. That's when you see that change right here. So this is actually kind of like two-way winding, but I'm sure it's not two-way winding. It's well, kind of. So that's how you pass data from the source to the view and the view back to the source. So now while we add it, now let's see how we can do two-way binding. So two-way binding is exactly like I just did. The only difference is that usually when you do two-way binding, you would bind the same property, the dog, to the same tag. So for example, if I refresh my app here, you will see that for go to the app page. You see that the data has no value, but it is bound to the dog object. So to do that, I'll just basically go into the input tag over here and bind to the value attribute. You bind that with the disk.state.dog. And there it is. As you can see, it shows up here now. If I make any changes to my code over here, it's going to reflect both places. But now if I do any changes to the input tag, you can see that it also reflects this as well. So I'm binding in here two-ways, because data coming from the dog initially, the state object out to the view into this input tag, we set the value to that. But they want to make any changes to the same tag. It calls back the same function, and it grabs the same data from the same input, and they update the dog again, and then it goes back again. So it's like it's going circle here. That's why you can't see the changes in here because it's already updating. So if you put outside, you can kind of see that it's actually affecting the actual object. So this is what I mentioned that you have to use the react, the class component, to see the state change. If you don't do that, if you use just the function component, then you're not going to see it. And I'll show you for example here. So we use the cat as an example. So now we're using a regular function component. Even though it's not a function component, I'll show you that it will behave the same way. So right into instead of render function, this is a function. So you can treat this like a function component. I create a, let's say, let's go down here, and we're going to duplicate this, okay? So I'm going to duplicate this one here, and put right below it right here, and we'll put the cat in here, okay? You see the cat is down in Milo, and I'm not going to bind, yeah, put the cat here as well, and we'll put here the same function, okay? We'll put here handle cat change. So we put another function up here. So we can see the difference. Handle cat change, and we'll put cat here. Oops, come on. Okay, so we handle the cat, and then down here, I'm going to create a variable here, okay, so any local function here, we'll call it let local cat is equal to, and we'll put here the same name. No, maybe not, I'll put here just cat, okay? And then I'm going to display the data here next to the actual cat with that dash, and then we'll put here local, okay? So this is also data binding, right? We're binding from the source out to the view, like I showed earlier in the beginning of the video. Let me clear this, okay? So because it's in the function, if I make changes to the cat, you're not going to see it. So if I have another function here, for example, I'll put here constant, just put here change cat, okay? And then change cat, I'll use the arrow function. Event, the same as above, and I'll put here local cat is equal to event, same as above, target value, okay? And then down here, instead of I change the handle cat, I'm going to call the cat change or change cat. So now I'm calling it local function as opposed to the global function down there, up there. Let me make a mistake, something. Okay, yeah, it's not this down here, just be change cat. Okay, so I'm making a function, it's local function, and so the render function to make the change when I update the cat here. Notice that now I'm binding this value from this state, which is up here, right up here. And I render that to the view so we can see the change here. And if I make any changes, it's going to call this function change cat, which is local function. And I'm going to change the local cat here to something else besides the word cat. And then I output that here, as you can see to compare between the stateless and the stateful property, okay, where I'll value. So now if I go here, change like something like this, right? Okay, something happening here as well. Let's see what's going on, value prop. Okay, so let's see, let's do a cat. I'm going to target mistype again. Fresh this, okay, lots of typos. All right, so here we go again, if I type TTTT, right? Notice that nothing changes, okay? Because the value is always set to cat. Let me turn this off actually. Let's not bind that so we can see the difference. It didn't work because I bind to the cat, so whatever I type, it's updating the Milo. So now if I do like, you know, GGGG, right? If I, so notice that you don't see the change here because even though I update the cat, local cat, it never update the cat over here. And how do I know is it working? Well, you can console along this, right? So console along the local cat, right? So we can see in the view over here what that looks like. So if I type in like, CCCC, you notice that it does change, right? It does change because every keystroke it changes, it causes function updates the cat, but then it never updates the view, okay? So in a way it is data binding. It is still binding. You just don't see the change, okay? So how do we know it's really working on that? Well, we just showed you that or you can go here and do something like, you know, this, set state, and then you can update. Here cat is equal to the local cat. Now, if I do that, and then if I change, I can change, it should go and update this cat, which is this Milo here, right? So do CCCC, you can see that it updates the cat object because it's a state object, probably the local cat is not. Okay, so I hope it's not too confusing. So to review again, you know, take your time to understand the concept between data binding from the source to review, view to resource and two-way data binding and react. If you have any questions, please do let me know. Thank you.