All language subtitles for 069 Prop Drilling.en_US

Amazing job, and once we have covered use reducer and hopefully worked on this project as well.

Now I want to talk about the proposed drilling now.

Let me just emphasize something right away.

Where prop drilling is not an official term.

However, it is somewhat of the side effect when you have multiple components and then you have the

big componentry, and then you need to start passing some state from the top component all the way to

the bottom of your componentry.

And the reason why we will cover drilling first is because in a next tutorial chapter in the U.S. context,

we'll see how use context fixes that.

And more specifically, will we take a look at the context API that is designed for that and not use

context is the new way how we can access that context?

So this is going to be somewhat of a repetition where we will set up a component where basically we

have less than one each and every item in the list has a button and we will just want to remove that

item.

So a little bit of repetition just to see what is Propp drilling and how it looks like.

And then in the next chapter, we'll see how we can fix that using the context API as well as use context.

OK.

All right.

Now.

We're going to navigate to our prop drilling folder.

We have prop drilling dress and of course, it is in the folder No.7 and then the set up in the app

I would want to import.

I guess I would start with that where I'm going to go with import, I'm looking for set up and that

it is coming from the editorial line prob drilling of course, and then the set up.

Now we would want render.

So we're going to go here with a setup and there it is.

Now of course it complains that there is some type of issue.

So let's not forget there we have the proper drilling.

Everything should work.

And of course, the reason why it doesn't work because I successfully messed it up by not pointing to

a specific pipe.

Now, of course, we have the Parap drilling.

Now, once we're here, like I said, a little bit of repetition where essentially we'll create a list

and then we will have the items in the list, of course.

And then each and every item will have that option of removing itself from the list.

Now, we do need to have a data here.

So let's go with the import and the data that is coming from.

And of course, we need to go multiple levels up.

So I believe three and there is our data.

So once we have the data now, I would want to set up my main component where I have the const.

I'll have a list value here.

So people again set people that people and that is equal to a year's state and then will pass in that

data.

So we should have, again, that basic array that we already covered before.

And now, of course, what I would want is to do some kind of return in my address.

So start by returning a section.

So let's go with section online, let's write Hurring three maybe, and let's just say prop a drilling

and also I would want to have a list.

So there's going to be a list component that takes as a prop the people.

So we're going to look for people here and that is going to be equal, of course, to my people.

State value and what's missing is my list.

Correct.

So we'll go with list.

And I know that I'm going to be looking for people.

Perhaps that's why I will the structure it right here without any hesitation.

And as far as the return, I would want to iterate over that.

Right.

Because we already know that it isn't right.

And then for each and every item, I would want to render the single person component that I haven't

created yet.

So I just go with return.

We will close out our fragment and then, like I said, we'll just go with people, all right.

We use map each and every item is a person.

And what I would want to return is a single person component that we're going to create nanoseconds

a of contact and then a single person is equal.

And in a single person, again, I know that person is an object.

There's going to be multiple properties if you need to jog your memory.

This is our data.

So we have ID and name.

And what I would want in that single person is to target the ID name for now.

Eventually there's going to be more data, but for now we'll just target ID and name like so.

And then as far as the return, let's just return a div with the class of item, class name and line

item here.

And for the time being let's just write a single item.

So heading for with a single item.

And now of course what I want is where I'm returning.

I'm going to go with a single person and I'll right away get my I.D. because remember we still have

the list.

So we need to use the Kiprop and let's just say here person and then dot it.

So once we save, we should have four single items on the screen.

Now, why do we have one?

Well, because my asked for objects.

And just so we all are on the same page, we have our we set it equal to data, that's our initial value,

then we have the first return where we have that in three with proper drilling and then our list component

that takes a prop.

And I named people and I set it equal to my state value of people than in here on the structure.

Right away, the people drop out of the props and I'm returning a people map.

So a new array weren't iterating over people.

And then for each and every item in my area, I return a single person component.

And then since that is list, I need to pass in the key.

And then in this component, of course, I'm accessing the ID, which I'm not using at the moment.

And as far as the return, I'm returning a single item.

So that is something that we have already covered more than a few times when we talk about tutorials

as well as the project.

Now, here comes the interesting part.

Well, what if I would want to set up a function that deletes that one single item from the list?

OK, let's first set up the functionality and then, of course, we'll deal with the rest of the year.

So we're going to go with const.

I'll call this a remove person is equal to an idea because this particular function will be looking

for the array.

Then we need to call set people then again, just so we can practice a little bit.

I'll call this in a function.

I'll say my current state value is equal to people, and then let's just return people filter and each

and every item will be set up as a person.

And I'll say, if the person ID does not match to whatever ID I pass them, then of course I'll return

it.

If it does match, then are removed from the list of person idea is not equal to an I.D. like so let's

say it and we have the function beautiful.

And now the interesting part starts where now I need to get this function where.

Well I need it here.

Correct.

So what are we doing first.

Need to pass and then we'll have to structure it.

Of course then we'll need to pass into a single person and then eventually we'll also have to use it

over here.

So the big question is, how can we get this function all the way here and this is that prop drilling

where essentially we have the component here and you can make a good argument that this component,

the lowest component, does not does not need that remove person function.

But there's no other way for us to pass it down to a single person.

I mean, I cannot simply say, all right, remove person.

You'll be called here in a single person.

A single person needs to somehow have access to that remote person.

And this is what the prop drilling is, where the illest component will have to take to remove person

and pass it down to a single person.

So first, let's start by passing the remove person as a prop down.

And that is something that you need to keep in mind where when we talk about the functions, we also

can pass them as props.

We're not limited to just state values.

So in this case, let's go with our person is equal to a remove person.

So now I'm passing in my function now in the list.

Like I said, I would need to structure it.

I would need to say, all right, so get me this removed person from my props and now I need to pass

it into a single person.

Now, I also need to pass in this ID and name and like I already previously covered, we have multiple

ways how we can do that.

But my preference is using this spread object notation where I just go with curly braces and then the

dot and then whatever is the name of my parameter, meaning this now points to that item in the list.

And I'm just saying, you know, add all the properties, meaning in this case I and name on to the

props of the single person.

And that's why right away I have access to the ID and name.

And then again we need to pass in that remove person.

So go here with remove person.

So now we're passing it down.

And of course if I'm looking for a name I can also look for remove person prop.

Correct.

Because now we pass that down so we say remove person and now it's finally set up our logic.

We're not going to say heading for central item.

There's a name here.

So I'm going to be looking for my name prop.

And also I would want to set up a button where I could set up a on clerk that will trigger that ermold

person.

So button that on click is equal to a in one function here and I'll say remove person.

And I also want to grab that ID each and every item.

The single person item will have that unique ID.

Correct.

And now of course I would want to invoke my remove person once I click on a button with that specific

idea.

And then as far as the value we are right Irmo and again idea of prop drilling is following where list

component technically does not does not need to have access to the remove person.

But we have no other way to parse down our function in a single person unless we actually pass it through

the list because that is something called prop drilling, because we need to understand that there's

definitely could be more components.

So if we, for example, set up this function all the way up in the prop drilling, what if I'm going

to have, I don't know, two or three components down the componentry?

So from the single person, I would need to keep on passing and passing and passing and passing all

the way down to that one specific component that is looking for that remove person.

And that is something that the context API as well as Redox.

But redacts is definitely for more complex cases.

I wouldn't suggest certain products for this particular scenario, but Context API is beautiful for

this type of scenario where essentially we can avoid this prop drilling.

OK, hopefully that is clear.

We understand what is prop drilling and then in the next chapter we will take a look at how context

API helps us to fix it, where we won't have to pass in return through the list or any other components

we would have into that one specific component that is looking for a function that is all the way up

in the component componentry.