 Hello, this is Christian. In this video, we're going to take a look at how component communications work in React.js. So I show you in this diagram here, three components. The parent component, which is this yellow box up here. I have a child A component and a child B component. So these two are sibling components. So I have here the color of the arrows just to indicate that the flow of data from the parent down to the child component it flows in this direction in the red arrows. And then the child to the parent component is following the blue arrows come from the child up here and likewise. And a communication between two child components, you can't really just pass data across other ways to do that, but we're going to do it this way using what's called a mediator. So mediator is really nothing than a parent component that will actually hold the state or the data that can be passed between the two components. So in order for child A to pass its data to child B, the data would then go up to the parent component, updates data, or what it needs to do. And then the parent component then passed its data down to the other component. In this case, child B. So in this little app example, I'm going to show you two different states of different data. One is going to be the parent data. Another is the child data. And this will be an estate object. And then I'm going to pass the data from the parent down to the child A so that you will see the data of the parent coming from the parent being displayed here in the child component so that when I make changes to the parent component here in the input tag, that data will be updated in the state and then will propagate down to the child component here. That's the parent to the child component. And then the other way around is that I'm going to have a child component have a input tag in here to make some changes. And we're going to pass the data from the child component up to the parent component. It will update the child A data up here in the parent component so that when I make changes to the child input here, the data will also reflect instantly the parent component here. OK. Right. And then likewise, we're going to pass the data that is coming from the A component here down to the B component. So the B component will show both the data from the parent and from the child A. So once you understand this logic, how data can be passed between the components, you can have a better understanding of how they work. All right. So let's go and take a look how this is looking in React.js. So here in the IDE, let me just go over this a little bit with you and then we'll do the coding. So I have the app component here. It's a class component that has a prompt and has a state. The state has two properties. Have a parent data that is assigned with the value of parent. A child data has the value of child A. Let me get a little bit smaller and see if you're OK, child A. And then I will render this data, both the child and the parent data, to these two tags here. And then I'm going to pass the parent data down to the child component here. So the child A component is inside another component called children.js. This file is this one on the right side. Over here I have two components. One is called the child A. The other is child B. So look at the child A first. We don't focus too much on the HTML stuff here. I'm going to pass the data from the parent down to the child via the props property or object. And I will render the content between the brackets and the parent tag. And then when I do a child passing data up to the parent, I'm going to update the input tag here. So we can read some data input here. I'm going to update a function call, send the data back up to the parent, and then we're going to update the child data so that you make changes in input. Data goes up here, and then reflect in the change right here as well. And then the other one is when we do the child A pass data to child B, you have to go through the same process, passing data from here to the parent. And then the parent, we're going to render a child B component right down here, pass the A's data down to the B component, just like you pass the parent down to the A component, same idea. And then we're going to render both the parent and A's data right into the child B component. And I have here, I have two of these components in the same file called children.js. And you can have as many components you want. And you can export all of them at once by using the directive like this. You just put inside curly braces like this. And each of these is the A component that you can expose or export to other components in addition to a default component, okay? All right, so let me go ahead and make some spaces, some room in here. I just want to focus on the A component for now, all right? So we don't have too much distraction. Let's do it like that. Here we go. Okay, so on the left side, I'm going to go and collapse this column. So we have more spaces. Now I'm going to go and then render the content, parent and child to this text down here. So in the parent, I'll put here, well, actually, you know, make sure let me run the app first. It's already running. You can see here it's running. There's no content here, all right? So I'm going to go and do that. And you know what? Let me just do something like this. Okay, so we can want to just do like that. So we have a space, right? So the child component, I mean the parent component, I'm going to render the content right in here. Put it here, this, that, state, that, parent data. So now you should see like data coming in right here already, okay? And the child will be the same. But now I'm going to pass the data down to the child component, all right? So you do that, you go to the child aid tag and you pass in a variable called parent data. This data can be anything you want. This variable, just what do we pick? And then you pass the data coming from the this.state.parentData. Okay, so we have pass data here to a property called parentData. And this parentData is now attached to the child component. Actually, let me go and open that over here. Okay, so we open the app, a component here. It comes to the props and then I'll render that right into this tag here. So you access the props.parentData. And that should be rendered right here, as you can see. Okay, so passing data from the parent down to the child. That's how you do it through the props object. Now, remember that one feature of the prop is that data coming in like this to the props are only readable. You cannot change the data. Meaning like I cannot go here and do this. So parentData, I cannot change to something else. Okay, if you do that, react will crash and you cannot see anything here until you press F12 and look at the console, it will tell you, it says, if you go on the way up, it says you cannot assign read only data. Okay, so the props is only readable, which is good because if you don't do that, chances are you might even overwrite a function. That's a big problem, right? So that's why it props are only readable. Okay, so that's how you pass data from the parent down to the child. And then I'll just warm up my implementation. I'm gonna make this input tag in the parent, input tag right here, so that when I type something here, it's going to update the parent and then at the same time in the child component. Okay, it's a very simple implementation. So I'm gonna go and do it on change. I'm gonna assign that to a function. I will create call update parent, right? Again, notice you don't invoke the function here, you call it a later time, it's an event, right? So up here, so normally you have done this, I showed you do this, let's get like this.updateparent is equal to this.updateparent, you have to bind it so you can use in state, okay? And then over here, you will create a function call update parent, right? And then like that, and then it takes a, I think a parameter call E, we call event, it doesn't matter. And then here you will bind the data to the, I mean, update this parent data using this.setState, and inside this function you pass in the parameter call parent data. Okay, I signed up with the event.target.value. Okay, I think that's it for this one. So that when I make changes here, that you see that the data is changing, right? Instantly in the parent component also passes down to the child component, right in here, and it changes right in here as well. So you've done this before, you know this is done, right? So now the other way around is now we're gonna go from the child up to the parent, okay? So this time I'm gonna update the child. So let me go here and here at this child data. So you'll see that now child data is now present here. And I'm gonna update this data from the child component. So to do that though, you cannot just send data directly like you would do this way, okay? What you do is you will have a function somewhere up here on the parent component that will receive the data from the child component and you update the data. Okay, so up here, I'm going to create another function. This function is gonna call update child, put that the child like that. Again, it will take the event. Or if you want equal event and call it data doesn't matter, depends how you do, depends where you get the data from. So if you wanna just call that new data, let's call it data, okay? Instead of passing the event, we're gonna perform the event inside the local component and it will pass us the data back up here. And then up here, you can do the same thing. So this that set state and then we're changing the child data and assign that with data. Okay, and then again, make sure you bind it this way. Now another way to do this, if you don't want to write it twice is you just simply change this to an error function like this and that's it, right? So I could have done the same thing with this one here, right? I could turn this off and change it into an error function, okay? Just like that, you see that it should work just fine, okay? If you don't do the binding this way, just do the error function and you know, either way, it'll be fine. So I'll use error function in this example. Right, so we got the function to update the child data. Now, in order for the child to pass the data back, you must pass this function down to the child component. So you can, so the child component can use it, can update or pass the data back up here. So again, it's just like callback function, right? So over here, down here, I'm gonna add another, probably I'll call it, you can call the same name if you want. It doesn't have to be, I'll call the same name, update child, assign that with this.updateChild function, okay? So this is a function, this is just a variable data, okay? So now in the child component over here, so I have a reference to a function called update child in the child component, wanna make some changes here. So it will be like before on change. I'm gonna update the data. So I showed you earlier that you can, if you update like the E like you do here, then you could just call the props.updateChild like this. I could do that. Maybe let's try that first, okay? Let's try that approach first and then we'll try the other approach. So all I'm doing is I'm attaching the function that was passed from the parent down to this child via the prop object. And then when I make changes to this function, this right here, oops, when I make changes here, it's gonna call this function called update child, which is this one right here. And this is a reference to the actual function here, right? So if I change it back to like above, event and then over here, and then I'll be like event target data, I mean value, right? So it'll be just like before, like above. So this target here is really this input tag, right? So let's see if this will work, but go here for each agent. You can see that I'm typing data in the parent and the child component, right? But the data is propagated up through this function, which is attached to this variable. This variable is assigned with the update child function here. This function receives an event from this tag called input tag. You grab the data from that tag, which is in the child component and you update the child data this way. So the process is very similar. The only difference is where is this target coming from? Okay. So that's how you would update or pass data from the child up to the parent. What I did here is I did exactly, very simply like that. You could also do this, if you want to manipulate data first before you update it past the parent, you can then create a function up here. For example, you can say something like const update. Okay. And then you can do also error function. That's fine. Like that. You put E in here for event or just E. And then here you could do something like that data is equal to event.target.value, right? Maybe I want to uppercase all of them so it can be like upper, is it too upper? I don't remember, I hope that's correct. Okay. And then I can then pass the data up to this function. So instead of doing here, I'll put it right here. Update, I pass the data through that. Now, if I do this way, so notice that data is the actual data in that event. So if I do it this way, I have to change the data here. Just call it data. And then I just assign that with data because that is only the data, right? Okay. I probably put a bunch of error here. So let's see. Yeah, okay, I'm changed. And then here I need to bind through this function. So I'm not this one here, but this function local to the chow a component. So I just put here the update, right? So let's see if this correct. I probably had it incorrect for the upper here, but let's see if I do. Yeah, it's incorrect. Let's see, uppercase maybe. Okay. Okay, let's do this way. Maybe, yeah, I probably do that here. Or maybe it's, you can attach the value. You probably have to wrap it or something. Let's do it here. To uppercase, okay. Will that work? Let's refresh this page. Okay. Yeah, so there we go. Okay, I have to be a text for somebody who didn't like that one. Okay, so now you can see that I changed the data here by also update or enable my data before I pushed that up to the parent, right? So it's the same idea, except you're passing the idea there as opposed to the event. So that's how you pass data from the chow up to the parent, very simple like that. And so the next one is we're gonna pass data from the chow a to the chow b. And so let me go over here and turn on the chow b component, right below here. And we'll call this the chow b. Again, these are just some CSS I already added earlier. So I just basically changed the color background. And this would be the chow b component, okay? I need to import that up here. So let's do the import of chow b. So here we go. So I'm gonna pass the data of which I already did from the parent and also did the pass data for the chow a. So I don't need to do any updates in the b, okay? So basically, I'm just going to do something like this. So I'll put the chow, I'll just call it chow data. So with this, that chow data, okay, I pass both data down to the chow b component. And then let me go ahead and move this spaces. I'm gonna update the chow b component, real simple just like before, props that this is the parent data, and then same thing here, props.chile data. And that's it, right? Because it's just receiving data. If you're gonna pass data from the chow b here up to the parent, you would do exactly the same as you did with this thing here. It needs to go through a function, okay, an event. I mean, if you're reading from the input tag, if you don't read the input tag, you just pass data directly from your code, then just call the props, and then call the function that was passed to it, okay? So here, if I go and type A in the parent, it's clear, hello, world, that's from the parent, and the chow, hi there, okay. Updates up here, but it did not do down here. So I'll probably do something correct. Let's see the chow a, this state.chow data, here we go. Okay, so we have from the b here, go, hello from A. Here we go, it's all up a case, and then you pass data from the chow a to the chow b via a mediator like this. All right, so yeah, that's how React uses, and there's another way I'll do it, maybe I do a different video to show you how you can pass data using just functional components as opposed to the class component, right? So hope this is helpful. Let me know if you have any questions. Thank you.