Okay so far so good.
We know that we can create a method we can pass it down to whatever child component we would want.
We're using the props.
But why don't we make this a little bit more interesting.
And first of all you know what.
I don't need the button right now because I'm gonna be showing you this with a book.
Just remember that within the projects we are always going to be testing out also with the buttons.
Meaning as we're passing more than to just one child but in our case we're gonna be testing out with
a book.
So in this case I can get rid of the handle delete over here so I don't need it as well as I'm not really
crazy about that button being here anyway.
So we basically got rid of the button and the only thing that we'd completing or I'm sorry it's complaining
right now that we have the handle late however we're not using it.
So why don't we go back again or here.
Let's say that there would be some kind of a button.
And again we're and add some type.
In this case we're gonna call this button and let's write again on click.
However in this case we're gonna be looking for what.
Well until the lead.
And here we can just say they lead me and again doesn't make sense at the moment.
I'll show you later on obviously why we're using this text delete me.
Let's start.
Very simple though.
If I'm looking here you know what these buttons can go for in the sidebar.
Remember we had the file with book data.
What do we have in the data.
Well for each and every book.
So for each and every book that's here I have the I.D. and I have image title not we already rendering
all the images titles and authors as well.
We are also using the I.D. as the keys.
So so far so good.
But what about if we would make this a little bit more interesting where we have the message and book
list and I would like to print out to whatever I.D. This book has.
So let's say I'm going to say that this handle the lead is gonna have the one parameter which is going
to be I.D. and then I'm always going to say here.
Yeah but what's it gonna be console logging Daddy.
Very simple for now let's save it.
Here we are passing still the handle.
So all that stays the same within the book.
We have the handle late.
Everything is working fine but obviously at the moment we're gonna click it.
Nothing is happening.
Meaning we're getting something in a console but that's not what we wanted.
And the reason for that is because we're not passing this argument so we're not passing the parameter
that's being asked.
We have the handle late.
All that is working fine but we're not actually properly handling it on our own.
In the book.
So how we can do that now versus what we need to understand that we're passing down the info from the
book list.
Remember now info wasn't what it was each and every item.
So we we'll gonna have that data.
We are all gonna have the I.D..
So why don't we go first and just the structure of that idea.
Why don't we say here that we're gonna be looking for the 80 and that should be the proper method.
Right.
So just save it.
And why don't we test it out.
Let's say that again we're going to console log just so we can see that everything is happening although
we could have used the reactive tools of course as well.
So let's say I.D..
So for each and one of them I'm gonna be getting one two three four five six.
No.
Okay.
So if I have it here why don't we run the function.
Why don't say okay handle delete.
And now I'm gonna pass the and at this point what do you think is gonna happen.
Because I have been telling you there's probably already like three times.
What do you think is gonna happen if I'm gonna pass this I.D. the way I'm doing right now.
Think about it.
So I have my method but probably the issue is that I'm calling this I'm not waiting when I'm gonna click
on it.
I am actually calling this not knowing what's gonna happen once I say it again I'm gonna print out one
two three four five six even though I'm not console log in.
And the reason for that that I am passing this I.D. This is working but I'm automatically calling function
the moment I'm rendering these components and that's not my plan because at the moment I can click all
day long and nothing is going to happen.
So there has to be a better way.
There's multiple ways but I'm going to show you probably in my opinion the fastest way.
Now that would be working with the narrow function.
So what happens here.
Let's say the 40 on click we all gonna pass the anonymous RL function and the way this is gonna work
again we're gonna be getting back the implicit return remember with Arrow functions.
That's all it is.
So we're having the arrow function and then this is gonna be our implicit return.
Now what we can do here is we can say no.
Then we're looking for delete.
And then in this case we will gonna be passing this I.D..
So I'm gonna say something like this.
So let me say that and now let's see what's gonna happen.
So now the arrow function is going to run automatically.
So all that is going to happen.
However the difference would be that now this narrow function is going to return this reference or in
this case prop of this method.
And check this out.
So now when I click it only then I see the I.D. again seems very simple.
You'll see in a second why we want to use the 80.
So probably you're like Well okay.
This doesn't make sense again.
He went through all this just to show us that we can get the idea.
Now there's more to it since we know right now that I can access these specific values.
Now let's think about it.
If I'm heading over back here where do I have the state.
So this is where I have all my books right.
But what if I would want to delete this particular book from this state.
Well I cannot do it here because in this state I don't have the book even if I would I don't know remove
this county name.
This is not what I have here.
All the books are in vocalist.
So this was the whole point of showing you how we can parse these methods down to our children.
So the children can affect this state because this is what I'm interested in right now.
I want to delete this book when I click it here.
However I cannot do it just from the book.
I couldn't come up with some kind of method and say please method go up and delete it.
That's not how it works.
So we first needed to get our hands dirty and figure out how we can pass it down.
Now this is very crucial because again there's gonna be two differences.
One if you're just passing down as there's not.
And then this is just going to be reference.
However if you're passing some kind of argument here it is crucial and I repeat this is crucial that
we returning this.
Again you just saw what happened if we just run the function.
This is not doing what we want.
OK.
So where are we going from here.
So I know that I can parse this side and I know I can console log that.
So why don't I start filtering something regarding whatever data I have with that.
So use decided to filter my state and then depending on which button is click then my state is going
to be different values how this is gonna work.
Well we have the book data each of them have the 80s and I definitely have it here anyway so why don't
we write the filter method.
So how the filter method is going to work.
Well first of all we're going to come up with some kind of name.
I believe we can say like sordid or something like that so let's read const sorted list.
Now the way this is going to work is that I'm gonna grab data from the state something I said is that
state and then I'm having books and you know what.
Why don't we call this box.
So sorted books and I can call the filter method on these books and I can filter out the rest of the
books that don't have this I.D..
So what I'm gonna do essentially is the moment I'm going to click it.
I'm going to say return me the list.
That doesn't include this idea and then I'm gonna render that list.
And that way we're gonna get rid of this book.
So for a filter like I said the same as with the map we're passing the callback function.
Now this callback function is actually going to be function that will go and execute for each and every
item in our list.
However in this case when I'm going to say that again I'm gonna be passing in some item.
So this is gonna reference each and every item that I have here and I'm going to say hey listen item
if your I.D. matches actually the 80 then return it or I'm sorry no then don't return.
So the way we're going to write it like this if item I.D. is not equal to the 80.
So what's gonna happen right now.
All the books that don't have decided are gonna be returned don't believe me not see.
And first of all you know what.
Why don't we do the console log this way we can for sure say that console log then we're gonna have
is that state looks so first all gonna see the box here as well as we're gonna see it once we actually
sort them out and then we're gonna see this that's at State.
So let me copy and paste the console log.
It's gonna be right here and then the idea would be very simple.
The moment I'm going to click on it.
So the moment I'm going to click on the one I should be getting back the list that's not gonna have
the number one.
So how this is gonna work.
Well let's see.
Well first of all this is just gonna be a little bit annoying here with this actual warning but I think
we can live with that.
Let me click on this.
What do you see right now.
So first of all I'm seeing here that obviously the books are going to stay the same.
Yeah of course I didn't call this that state.
My apologies I should have been looking for shorter books.
This is the issue I have for some reason.
Yeah I'm calling this that state books and this state books of course.
Both of them are going to be six.
Why don't we do this.
Why don't we look at these sort of books again one more time.
The second shot then as I delete how many I do have.
Well in this case it says well there is this sort of books is obviously this is a variable.
Oh OK.
I don't know what is happening.
First time I made a mistake with this that said books no it what sort of books.
OK.
Third time hopefully is going to be charm.
Again the idea is very simple.
First I'm just console logging what is in a state.
Then I'm gonna be filtering all the items basically that don't have the idea and then we'll see what
we're going to have.
And yes finally finally it worked.
I'm really glad.
So six items technically correct.
Right.
So six items was the initially hold the books.
But then I have five.
So what I did is I filter through the list and I said If your item I.D. which we're getting back from
here all these I.D. if item your I.D. matches the I.D. that I'm passing in then I'm gonna remove it
then this is not gonna be here.
So that's how it does work.
So now we have again six then we have five if I'm gonna click on one more time the number six is gonna
be gone.
So now we should be having again five or in this case I'm not having what the last one and one that
has six because again in this case the one with the return and so on and so forth.
So the way we're going to filter this is now with said state.
So let me delete this and we can also maybe clear to console a little bit too much information here.
And the way we're gonna do it like this.
So now we know how we can use this that's at stake.
So in this case what I'm looking for is I'm going to call this that's a state and I'm going to set my
books books equal to the books.
So at the moment I click on it I'm gonna have the new Array which is going to be returned and all the
items that don't have the I.D. That's matching the head that I'm passing and then I'm going to set my
list equal to that.
So that way if I'm gonna click on this I'm gonna remove it of course kind of click on that one I'm going
to remove it.
And just to probably show you because you're tired of me talking about it why don't we do sort of books
and yeah let's start out so we can maybe make the console a little bit smaller and let's say we want
to get a room number one we don't have number one.
And you know what.
We don't need this state books.
This is just annoying me service and I said the moment we're going to refresh it we're getting back
a new fresh pair of data.
So of course there's gonna be all six of them.
However one is gone six is gone.
Then this guy is gone.
Then hopefully we can delay this one this one on this one again.
I'm going to refresh it because all of them are going to come back and just to tell you the react doesn't
care what you said.
This year obviously it is in our interests if we know that this is the NRA that we are filtering this
and we are setting the new All right here.
Or I could have said something like this so this can be zero.
Then I was like This is just gonna throw you a bunch of errors because this is not.
It says well does not that books map is not a function.
So we're running the map function on the state.
So you need to be careful.
So as you're setting the new item that you're going to be replacing you need to make sure that that
is the same data structure and that you're just changing something which in our case we were getting
a new array with all the items that don't have the same idea as we're passing down.
So hopefully my few mistakes didn't really throw you off and yeah and this is how we can parse the methods
down to the children.
And this is why it's so powerful because these methods affect the state that you see right in the previous
ones were affecting only the each and every item.
Now you're talking you know big boy's game because now you can really change a lot of law and values.
So yeah that's the beauty about passing down methods to a child component.