Okay.
In this video, we will discover how we can actually communicate it back to the parent.
And we'll also learn how to use the events and what the events are.
So what we can do here before we'll move on, I will clean a little bit here, so we'll create just
a tag here in the and I can remove the React fragment.
So we'll have just one H here.
So what we have here is just a simple header and then we can also go to the app and then I can remove
this.
So we have a simplified version of the same application as we had before.
And now let's go to the component here and let's do something else.
So what we can do is it doesn't really matter if we do that in the functional or we can do it in the
class.
What we can do is we can have events and the events are based on the input or based on the interaction
with the users.
So let's go to the footer here.
And this is our class based component.
And inside this H2, what we can do is we can create an event.
So I will inside this h tag.
So let's put this into another line like that.
So we have just one element returned.
And then inside that H2, I can do onClick, which is one of the events available for us on in React.
And basically this is the same as the click on in JavaScript.
So whatever we click on the H2 element, we can trigger a function.
So I will do curly brackets here like that and that means I will run a JavaScript.
So let's create our function first.
I will.
Create a function here.
For example, create alert.
Alert like that.
And that's a simple function inside our class.
So what I can do is I can do this because I'm referring to our class and then I will do create alert.
I don't pass parentheses like this because this will be trigger whenever we render this page, but we
don't want to have it trigger this function whenever.
Whenever we render, we want to have it on click only.
So you do this create alert and then we have this function.
So what we can do inside this function alert, let's say.
Hello.
You clicked.
Me, for example.
Like that.
So what do we have now is we have H2 element and we bind on click to to this and then we trigger this
function which will do alert.
So let's test it Now I will go here and we have our footer.
So I will click it now and you can see here, Hello, you clicked me.
That's the alert that we trigger with our on click.
So basically if you work with events you do on and then name of the event.
In our case it's an event click So what we can actually do as well, we can use this same functionality
as we have here for communicating back to our parent.
So let's come back here to App.js and then we can pass this as a props, but also we can pass the function
as a props as well.
So if I will go back to the footer, I'll close it now with the header and instead of having that function
here, I will take it off and I will put it here inside there.
So we'll do function.
Create alert and then we will alert here.
So this create alert might be.
Passed to.
To this function, to this component.
Like, for example, alert.
Or my alert.
Is equal to whoop.
Create alert like that.
So my alert is reference to this function.
So I will do my alert now and that's a part of the props as well.
So if I go to the footer now and then I can do this.
Props.
And then.
My alert.
So what we are doing here on click, I will trigger Pops my alert.
And this my alert is a function.
My alert here, it's a create alert function.
So if I will do this, you can see it is working the same way.
So basically this time I don't trigger the local function from here.
I trigger a function from the parent so I can communicate back to the child, which is passing some
information, and I can also communicate it from the child back to the parent.
So I use the this props the same here, this props and the name of this.
What we pass here and that's referencing back here.
So this is two way communication in between the components child and parent.
And you can do it using the props.
So that's how it is done.
What else we can have instead of onClick, we can have, for example, if we have input, let's say
type.
Text.
And then we'll need to make sure this is just one element returned and we can use the fragment.
Uh, we need to.
Oh, that's inside the return.
So we kind of mess up.
I will just return it here, and then we have return there.
So I will do.
Like that.
So I'll wrap it first and then I will indent it and then I will create a div.
So I kind of doing a lot of things, but I will repeat it in a second again.
So what I did is.
I have returned.
I just return a single element, which is the if I can do reactive fragment, but it doesn't really
matter for us at this point.
This is just easy.
And we have the same H2 with Click as we had it before.
You can see here and also I put import there so I can have more than one elements now and then.
Here I can do on change.
Like that and then I can have another function.
So this.
Changed, for example.
And then this change, we can implement it here.
So that's our function here.
Like that and then I can do console log.
Something like changed here.
So this is I have an input here.
I will open our inspector, our code, I will put it on the bottom like that and I will open console.
So whatever we will change here, we are expecting output there.
So I'm changing.
You see that many times I've changed something and that is trigger.
So you can have different kind of events in your application.
You might have it on click, you might have it on change or you might have it on different one.
Actually, if you start typing on, you can see here a lot of different events are available like on
Mouse up and so on are available.
I just show you the most popular one, which is on Click on Change and so on.
So that's how it is done with the events.
You just put it event on the element and then you refer the function.
You can refer the function with a props to external parent and then you can handle this on the parent
side or you can do it inside this function, inside this class.
If you have functional based components like you have it here, then you do a function outside of this.
So it will be normal function.
But if you use the class like you use it here, you don't use the function keyword, you just name of
the function or the method because the function inside the class is a method.
So you pass it like this.
So we have a few options how to handle this.
And in the next video we'll be talking about State.
Also, I will show you how this kind of setups makes a little bit of problem for passing some values
because we might have a problem to access this inside our function and we'll be talking about it later
on.