Hey, what's up guys today? We're gonna talk about how components communicate in reacting basically parent to child grandparent to grandchild siblings you know these relationship where they Either pass information to be a property or event and by the way This is a much larger series on a react and if you're not following from the beginning you can do so I will provide a link here, so you can do that and Welcome to Techsith tutorials Alright, so let's start with a brand new project. I'm gonna use Create a react app to do so the name of the product is going to be react component Communication alright it takes a few seconds Alright so we have created this new project And what I'm gonna do go into this app gs and they move on to garbage first So this would be our parent, and then we need to create a child So what we're gonna. Do is in a source folder we can create a folder called Components and Inside the components we can create another folder called Parent to child Inside we are going to create our child da Jia, so this would be stateless component if you don't know much about Modules I have a tutorial so you can learn in detail how all this works, but we created our child component now Let's understand how parent and child usually communicate in react you have Made containers so your our app component is our main container It could be a separate route or anything, but which holds usually the state, but that's not not always true but you know usually your main container would hold a state and you'll have like other small component the children components That would be more like a presentation component, which would be stateless component like this one so the fact is there could be two possibilities What are these stateless components can be a third party component so when they're designing this third party component? They have no idea about your app so we need to keep this component as abstract as possible just like a parent-child relationship where Parent is responsible for for their children first of all parent provides What children need the food charter and all that stuff right and? If if the child wants something done make at this point, and then the the parent would decide what that Action should be so here We're gonna do the same thing so let's build a component a button simply and which is wrapped by a div So, but all right now this button needs some Title but again, it's gonna be provided by the parent so The button would say whatever parent provides so parent would provide props props Could be anything so the child would assume okay there should be a title So I can say prop stock Title and again child doesn't know what this title is going to be when you similarly when you click on this button You can have on click event we don't know what it's gonna. Do so I can call it Let's say do what ever Basically try this pointing finger and then power would interpret. Okay what they really want to do with this event When somebody clicks on this button so things are pretty abstract in here. Well it this should be Props dot do whatever now. Let's use this child and Our app component which is our parent Let me just remove this logo first And here I have to first import the child So I can say child From this is inside Components and Parent to child and inside. I have a child so here I can use My child now. I need to provide two things I Need this child needs a title and it needs to Satisfied this event so it's a parent's responsibility to do that so we're gonna create a stage here. Let's call it state equal to and it will have a title And we can have some place holder tile call It's a place holder the title and we can pass this title to this child by calling title equal to this dot state dot title Right so it's passing as a property so properties are passed down From parent to child what about the event so this has an event called? Do whatever? events are often They're passed down, but they're trigger upwards this is Needs to be passed as a property, but once somebody clicks on it will propagate upwards So we can create a new event here, which would be here inside the app component equal to Now we need to as a parent. We need to have some responsibility to Build this event and so the event is going to be here So I can say let's say this child is going to change the world we can say Change the world and so this would be you can have a new title and all this gonna do inside as Set the stage so we can say this doc set state And it's gonna be mu say title it's going to be New title that's all it's gonna do so when you click on it it will basically run this function now remember I mean if you following this tutorial series, and we actually learned how to Pass argument to events and you can do it this way, so you can say so this would be this dot change the world Dot we need to bind it to this And then we can pass a new title here. We can call it a new World, so let's look at it in detail so the child has on click event Which basically takes this to do whatever property from? the props that's provided by the parent and It's gonna execute that but that event is going to propagate upward Which will translate into change the world? Event in B. And so the parent will execute this event and it will set a new Title which would be new world and then that title is going to be passed as a property to the child in this part So now let's execute this so I'm gonna say NPM Start, okay, so we have this button here placeholder title which is default if I click on it hope nothing happens Something is wrong The issue is Do whatever it's not spelled correctly here Which I often do so I save it, and I save this as well Now if I click on it it works So right now we have a PS as our main pound and then we have a child now Let's make a pious as a grandfather and we introduce a parent and then parent would have child inside So I'm gonna do is Create a new file called Parent dodgiest Which I need to import, which will be also stateless component. I need to import react And I can say Parent and so the parent would have a child But it will be wrapped with a div and inside all I'm gonna do is Child and I need to still import the child here, so I'm say Import Child from and they are the same level right now so this would be Child All right In the inside the app component instead of child now. I need this to be a parent And instead of importing child here to I need to import parent here This would be From the parent All right, so how do I pass so now the app is a grandfather right it needs to pass this to? parent and the parent needs to pass those property and some of its own if he wants to So the simple way to do is if I want to pass everything that that the grandfather is passing I Can just simply use spread operator the syntax is pretty simple, so he'll I have props And I can simply do this dot dot Props and that should actually pass everything that is coming from grandfather to the child So if I save it, let's see if it really works, so if I click on here it really works So it did pass everything now. Let's say if I want to pass an additional property here. I can pass. Let's say X Y Z here equal to you know X Y Z if I want to pass to the child And that should go let's say title is the XYZ egg z Right passes everything that the grandparent has passed and it has its own property Added to now I have X Y Z here now. Let's say how do siblings communicate so for that We don't really need to have two children. We can have you can use the same child the child will remain as it is and again, it's it's It doesn't it's oblivious to the world. It doesn't really know what the outside world looks like Except all he cares about it. What really wants it wants some title and When it clicks on event something needs to be done the parent however will have two children now I cannot pass the same props because they might have different requirement so What I'm gonna. Do here is I'm going to create two separate events parent would satisfy What child wants so first shell what it does do whatever it will say I want to change the world because not all charts are not created equally so the one will change the role so this would say prompt start change the world event and the second child Would can't do something completely different, and you can say keep the world Same event and again the title can meet his title and this would be same for both of them. That should be it now Well there should be props Now let's do a pas So the parent has to pass now to event it needs to pass The grandparent has to pass two events so instead of do whatever here change the world event equal to which would be this event so I can say this dot Change the world dot bind this and then the new World and it can have another event called keep the world same Event equal to this dot keep the world Same dot mine We haven't created this event yet, but we will soon And we're gonna call it same World Okay, so we have now choose two separate events that is being passed from grandfather And so here we can create another event and that it should be This one keep the world same well The new title should be new title so it should take care of it, or I don't need this too It's because as you can see they both look the same so I can actually have the same event here and I Remove this one because it doesn't it's it's pretty abstract right it Just a different title is being passed so now let's see if it works Hopefully it should work I have two events first when I click on one they both change to new world when I click on the second one it changes so basically it's communicating through this event we're Changing the other the siblings title you see so this is how siblings communicate through parents usually within the same container you wear your parent-child relationship You should follow this rule But let's say if your one container and the second container and they want to communicate with each other You can use some sort of an event emitter So we one would subscribe to that event and the second would Event emit the event and so that's how you can catch the information that would be like from any Component to any component, but I would suggest that within the same container if you want to communicate Usually you should follow this protocol. Okay, so I hope you learned something from this tutorial if you did you can help three different ways Obviously you can like subscribe and provide a nice comment Support channel we are patreon. I'll provide a link here and also you can translate the video for me You can find the information in the description how to do it. It's pretty simple, and thank you
