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