As we're covering the methods the sad state as well as working in general with some kind of click event.
Why don't we also cover the poor up drilling as well as passing methods to the children.
I'm calling this prop drilling meaning I didn't name this prop drilling but we can do it with the props
as well as with the method.
We all to look at the example as we're passing down the method from the parent all the way to a child.
However understand that you can also do this obviously with the props and that is one of the names that's
being used where this is being called Prop drilling.
And what do I mean by this.
Well first of all let me create another component.
And what I would like to do actually in this case delete everything that we have here with the buttons.
We don't need it anymore.
And this is just going to be on our way a little bit.
And I think it's just gonna confuse us more than anything.
So let me get rid of the counts and names and all that and what I would like to do instead is to create
another button that's gonna be child for my book and then I would like to pass the data from the book
list that we know we have and you know what.
By the way I can close this guy as well as this one and then pass it some kind of method where I can
click all the way from the book list to the book as well as to the button that I'm gonna be passing
here right now.
So why don't we start like this.
When we say OK.
There's going to be you file.
I'm just gonna call this button J so it doesn't really matter what you call it.
And then here I'm gonna say that I would like to have the functional component so I know that I can
type 3 1/2 C since in this case we're just gonna be getting props.
We don't really care about it anyway.
Then in this case we're not going to be getting the div instead of we're gonna be returning the button
and let just right delete me at this point we're not gonna set up the functionality for deletion rules
and say delete and delete me and then we're gonna say that for this button I would like to add a little
bit of styling.
And you know what maybe before the styles are just the proper attributes for Rachel's emails this would
be button.
And I think I can close the sidebar by the way.
And here I'm going to say Mm hmm.
I would want some kind of style and let's do a little bit of inline styling so let's say we could have
maybe background.
You know what.
Let me get it back.
Background is gonna be red.
Color is gonna be white and we can also do maybe font size and you know what I am already making theirs
is remember this was javascript so I was telling you that you shouldn't do it but obviously first thing
that I do I keep writing as an error.
We need to write white here because that would be my color.
And then let's shoot for I don't know font size like two or three times so let's say to our aim.
So this is gonna remember obviously at the moment nothing is showing how since we are exporting as a
default I can head over back to the book and I can say here up on the top and I'm going to be importing
the button so I can just call this button from and then I'm gonna be looking for the same folder of
course.
And this is where I'm going to have my bought tons.
Mm hmm.
Okay.
So I named my five buttons.
Fair enough.
I was shooting for a button but I mean this is probably as good as it's gonna get.
And then somewhere here let's say after the hearing six why don't we actually rendered.
What do we have a look of what do we have here.
So let me say this.
And sure enough I have a big nice button that at the moment doesn't do anything.
And here's my plan and for this I was gonna go back again to the reactors so I'm gonna make this bigger
and we're going to look for inspection and we're gonna be looking for the reactors which are hiding
in this case and then I'm gonna show you where we're gonna be passing the information.
So this is my plan.
We have the book list and then within the book list we have the section then within the section we have
each and every book.
Now each and every book right now is rendering the button that we have.
So my idea is pass it on the book list to the book as well as later on.
We're gonna pass it to the bottom.
So that's my plan and as I'm doing this I'm gonna show you what would be the difference as we were actually
accessing the method that is not in the same component.
However this is gonna be not only the child component but it would obviously work the same the child
come on.
This is could be a grandchild component technically.
Well what you're seeing is we have one parent that I'm passing through the child and then I'm gonna
pass down to this button.
So this is why it is called prob drilling because you technically are drilling the props and by the
way by the way again we're skipping a bit of head but in general this is why you start using something
like redux or something like context API.
Well maybe not this particular example Don't get me wrong but this whole idea where you're passing data
down sometimes gets really annoying because what's happening is that let's say you have component that
is five components deep that really gets tiresome really fast.
So that's the reason why you come up with those solutions or not you.
That's the reason why they came up with those solutions where you can get data straight from some kind
of parent all the way down here without passing the book.
But what we all gonna look at is the normal case where if you want let's say this button to have some
kind of method or some kind of prop that is sitting here with then book list we do need to pass it through
the book and that's gonna be kind of important and you will see how this is gonna be happening again.
I skipped a little bit I've had of course the moment we're going to start work talking about the context
API I'm going to revisit this a little bit and all that but just to kind of give you a heads up that
has you passing something now on some kind of information you will going to have to go through the book
because this is technically or not technically this is a parent element for the button anyway after
five minutes of me talking and talking why don't we head over back to the book list and now let's create
our method we know.
Okay.
So this would be my book list.
I mean we already aware of the state so I think I can delete that.
And why don't we say this.
Why don't we say handle and handle delete.
This is just gonna be my math.
Now I'm going to set it up as an oral function and for now let's do very simply let's just write and
this would be the quote curly braces.
But obviously you can write it however you like.
You don't need to use the curly braces.
But here I'm going to say console log and we're going to say I am or you know what let's use the actual
template liberals and I say I am from technically parent container but you understand that this would
be a grandparent parent come pone and component and we already know that if this is in the same component
it's very easy.
The only thing I would need to do if I would want to click it here I would need to set up whatever element
I would want.
And now we're just attached one click and we're going to pass it by the reference.
Remember we did this already in the book.
It's not a big deal.
We have covered it over now it's a little bit more interesting.
I would like to parse this handled delete the first rule book.
So how do we do this.
Because even though we had some kind of buttons here there's no way for me to access that method right
now.
I cannot just call somewhere here let's say on a heading then I'm gonna say on click.
And then on click I'm going to be saying handle late because that method doesn't exist.
I cannot say there's that and we cannot do that.
We can do it right now in a book list because this is in the same component and I have moved it but
we cannot do it in the child.
So how do we do that.
Well we pass it with the props and this is what I'm saying that this would work exactly the same if
we would have some kind of extra Prop. here.
So let's say here again name is gonna be John if I would want to pass this down again I can just access
this and passed it here as a prop again.
We have already covered this since we already work with the books.
So the same is going to work with this handle method.
What I can do here is I can say handle the name is gonna be delayed again we can name our proposal would
like but I'm just gonna name it exactly the same.
And here I'm gonna be looking for this knot and then I'm looking for a handle.
So first of all I'm passing this now.
Now what do you think is gonna happen in the book if I'm gonna head over here and if I'm gonna console
log the props do you think I'm going to have her.
No not since I'm already suggestion you probably guessed that we can probably access this.
So why don't we render this I'm going to do the inspect and what do you see in a console.
We have six objects now okay so far so good.
And then what is in the object.
Well we'll have the info that we are rendering right now.
But I also have the method.
So we successfully passed it down the child.
Now this case we can start using the method that was actually created here in the parent container.
Now okay so we can do it here.
We can definitely do it here.
But why don't we do something interesting where we pass it down to the bottom.
Now how we're going to pass it down to the bottom.
Well the same way and we can just say no no.
That was the name what handle delete.
So this is gonna be the prop for the button and we're gonna do the same thing.
However in this case we don't need to use this because this one we're passing down as a prop we can
just say here handle the light is gonna be equal to handling the same.
And I would like to just show you quickly let's say we're going to have another button here and then
for the button I would have the on click and I would want to access that handle delete.
Again we're not going to be passing this dot that is kind of important because this one we're getting
as the props.
This is not gonna be from the actual class instance that we are working with.
So this is gonna be from the parent.
That's kind of important.
So here we're going gonna say handle delete not this dot handle it just as a side note because you will
obviously going to see it with the button anyway.
But at the moment let's deal with that.
And then I have handled delete handle delete.
And of course the react is complaining because a console logged it.
But I didn't set it up.
So how do we do that.
Well we can use again the structure.
So I'm going to say handle delete.
And in this case I'm going to be looking for these that props.
And in this case we're not looking in the info because both of them are sitting side by side.
So we have one that is a method and then we have the actual info.
So let me say it now everything should be fine.
And now we have the delete me that has been passed down I already technically show you how we can effect
it anyway.
But what's happening here is again we can do all kinds of restructuring if you want to access right
away handle late.
I can just say that the handle can use handle the lead.
So now we're going to be the structuring and we can right away access it somewhere here.
So let's say maybe I don't know after our style we can do again on click.
And then let's call the function.
And again this is would be the same thing.
We're not using this.
And by the way we wouldn't use this anyway.
This is obviously a function but as a side note anyway so handled late.
Let me say it.
And now let's see what's going to happen in console.
And for some reason I all the time I want to do that.
I don't know what's happening but let's click it.
And as you can see I am from parent component.
And congratulations we have successfully passed down the method all the way to the vocalist to the book
as well as to the button.
So now we know how we can create actually method and pass them out to a children's component.