And with our toggle functionality in place now, let's work on the removing the tau functionality where
if I'm not interested in tau, can just remove it from the list.
And once I remove all the words from the list, we'll set up another return where we display was left.
And then, of course, we can fetch the horse one more time.
Now, first we need to decide well where we are going to set up the functionality.
The moment we are in the tour.
Correct, but it is sitting in the tourist component and then TORC is rendered and the objective is
not where do I have my torse data?
And that is, of course, in the abcess.
So it would make sense if I would have my function right here, but then where I'm going to call it.
Well, that is going to be in every tour.
Right.
So we all need to figure out how we can pass the function, the remove to our function down to a or
component.
Because I'm here, I will need the ID.
This is why this structure, because my function, of course, is going to be looking for Darity, because
I would need to know which door I would want to remove from my list.
So let's go with a function removed for now, like I said, will be looking for that as the parameter
will pass in the ID.
And then as far as the functionality, we're just going to go with const all name this new torse and
that is equal to torse.
And we just go with filter method where I say if the tour ID doesn't match beautiful, it's going to
be placed in the new Tercera if the ID matches whenever I'm passing.
Well, that means that that is the thought that I would want to remove.
So of course that's why I will not place it in that new hurry.
So say to where ID and then does not match that.
So if that is the case, if the tour ID doesn't match the idea that I'm passing and beautiful, is it
going to be returned?
If it does match then it's not going to be returned in the new tourist.
Right.
And then of course I will call my setters and set it equal to my new torc.
Now the next question is, well, how we can get this function down to a tour component?
Because this is where I would want to call it, because this is where I have the button and this is
where I have the hurry and we simply pass it as a prop.
So I have my function.
I just need to come up with some kind of prop.
In this case, I will name it exactly the same.
So removed for prop is equal to my remove to more function than I would need to the structure in my
towards component.
So I removed her and also pass it to her component so we can also pass functions as props.
And let's go.
The same name removed to our prop is equal to a remove to a function that is coming from objects.
And then finally we go for remove to.
Propp in the tour component, by the way, this is something called prop drilling, which we're going
to cover later in tutorial.
So if you're watching tutorial and then project tutorial on project, then I just want to tell you that,
yes, there's a way around this where essentially we'll use something called Context API, but for now,
we're good.
We have our remove tor.
And then finally in my button, of course, we just need to call it where I'm going to go it on click.
Then I'll set up my inline function, of course, and then I would want to invoke my remove tor.
But then remember Moftah always looking for what it was looking for the correct and each and every Tor
has that unique idea.
So just pass it into a Muftah.
So that way I know which door I'm going to be removing.
So I have my thoughts and you want you can check your array where once you click on not interested.
Now the array got smaller.
We already have only four items and we can keep on going here.
I said not interested.
And finally, once we remove all the tools, we should have the empty array.
And this will be a good case where we could set up another return where if there are no more tours that
you can display, why don't we set up a condition?
So I'm going to navigate back to objects.
I already have my one condition for loading.
And then second, the default return now would want to set up another one where I'm going to say if
and now I'm checking for tors length and if that is equal to zero.
So essentially if I have no torse in my state value, well, what I would want to return.
I'm going to go here.
We return and we're going to set up our main here and inside there.
We're going to go with Dev and I'm going to have the title and land inside of title.
Let's go with adding to no towards left like so.
And now it's add a button and this button will simply call the fetch torch.
So essentially the function that fetches it.
Or so then of course we will set up our state value afterwards back to the array that is coming from
the API.
So we have not is left and then right after that we're going to go with Button will go on click.
There's going to be equal to my inline function here and let's go with fetch torc like so.
And by the way, in this case, you can also set it up as a reference if you wanted to, since you don't
need to invoke it with some kind of argument.
So in here, let's write button and let's type refresh.
Like, so what you'll notice is that once you remove on TORC, we'll refresh them, so I remove all
the doors.
I have no tours left.
And by the way, I think I can add a styling here.
So it's a class name and that is equal to a.
It's going to be a bit more presentable.
Now, in this case, I'll have to remove the torch again.
We removed them from the list, I have no tours left because now, of course, our condition matches
and I have this option of refresh.
I click refresh and then of course, I fetch the torse from the API and display them in my torch component.
But you do it for a second project.
Hopefully everyone enjoyed it.
And I hope to see your next project.