All language subtitles for 16. Emitting Events to the Parent Component

The last thing that we need to do is make this delete button functional.

So when we click on it, it should delete that particular name.

However, the issue that we have right now is that the delete button lives inside of the name Dot View.

However, when we click on this, it needs to affect this array right over here which lives inside of

the app dot view.

So if this doesn't make more sense to you, let's look at a diagram.

So right now the app to view it houses the array of selected names and then the name Dot View.

It doesn't have any of those arrays.

Instead it just has that one name that it is supposed to show.

Now it has no reference to this array, and thus, how are we going to update it?

Well, we can update it one of two ways.

We can go ahead and pass that array to the name and then just go ahead and update it in there or what

we can do.

And this is probably a better idea.

We can emit an event.

So right inside of the app dot view, we can create this remove name functions, we can have this remove

function and we can call this function any time the name Dot View emits a remove event.

And once it emits this remove event, it's going to also pass in that name.

We can catch that name inside of the parameter and then just remove that name entirely from the array.

So let's actually go ahead and implement this.

So let's actually go over here right to the card, dot card name.

And what we want to do is we want to say that we are going to listen to a remove event.

So right over here, we're going to say and remove.

And as soon as you know, we emit error move event, I'm going to call a callback function that is going

to call a function that we haven't created yet called remove name and then is also going to pass in

the index of that particular element.

So let's go over here and let's go all the way to the script and let's actually create that function.

So let's go right over here.

I think I think this is pretty good.

Maybe, maybe right here, right below the actual state.

We're going to create that remove name function.

And then this is going to take in the index, of course.

And this index, let's define it as a number, just for typescript sake.

And now what we're going to do is we're going to say the filtered names.

So what we want to do is we want to get basically all of the names except the name that lies in this

index.

So we can say filtered names is equal to.

And we can say a brand new array.

And we can say selected names dot value.

So this is just basically structuring the current array into a brand new array.

But then what we need to do now is very simply do a filtered name, dot splice.

And then over here we're going to say add that particular index.

And then one.

So whatever this index is at.

You want to essentially splice that out.

And we just want to splice out one element at that index.

So we're just going to splice out that particular index entirely.

And then very simply, we're going to say selected names.

Thought value is equal to filtered names.

So that's really all it is that we need to do from the airport view side.

There's one last thing that we also need to do.

Right over here, we also need to pass the index.

So right over here, we can say.

Index.

And then over here we can say index is equal to.

So index is equal to index like so.

Okay.

So that's all it is that we need.

And then inside of the name Dot View.

Now what we need to do is start emitting events.

So let's go ahead and do that.

So right here, what we're going to say.

Is concerned and then this is going to be emit is equal to the fine emits.

So over here we're just going to define all of the different emissions that we can do now.

Right now we can only do a remove event because that's exactly what we defined right over here.

So we're going to say remove and then over here we're going to create another function.

So we're going to call this remove name.

And this function is very simply going to emit a remove event.

So it's going to be we're going to call emit, we're going to say remove.

And then as a parameter, we're going to pass in the props dot index.

So let's go over here and actually define that.

We also get an index.

So over here we're going to say props dot index like.

So now all that is that we need to do is right over here.

We're going to say act click and we're just going to call the function remove name like so.

So that's pretty much all it is that we need to do.

So let's just give this a quick refresh.

Let's just get a bunch of names here.

And if we're not interested in them, as you can see now, they're getting deleted.

So all these different names are getting deleted like so.

Now, of course, we can click on it again and just get the names back and then delete them again.

But that works.

A Okay, so I hope you guys learned exactly how we can start emitting events, communicating from the

child to the parents and actually manipulating the state there.

And that is actually going to conclude our project.

I hope you guys enjoyed it.

And now let's actually go ahead and move on to bigger and better.