OK, so we can see the problem with a class setup where essentially I would need to guess how many links
I have and then adjust my height depending on that.
And of course, I would want to make it dynamic where depending on my legs, I'll have the height for
my container.
So how do we do that?
Well, first, I'm going to go back to 10 grams, even though technically we won't use this class at
all.
And then I would want to navigate back to number and remove that class as well.
And by the way, we really wanted to we can go back to the simple class name, which is exactly what
I'm going to do.
So I'm going to say Linc's container.
Just so you don't think that there's some black magic happening and we go back to the container and
we already know that in the CNS, of course, we hide it.
So this one won't change.
We'll just leave it the way it is.
However, in a number, I would want to start using the use ref.
So what I would want is to set up two users, one for the container and then the second one for the
lunch.
And yes, to answer the question, I did that on purpose.
So we'll have to have some kind of and closing container and I'll show you that at the very, very end.
So we have like a container and then we have lunch.
And now I would want to set up to use Arapahos hooks.
So we go where we have the state's values and we're going to go with links.
Container, if not, of course, will be equal to a USRAP and Will passino will copy and paste and I'll
just call this one Lynx.
So this is going to be four on our list and then this is for the deaf.
OK, hopefully that is clear.
And then once we have the setup, remember, we just needed to add that RF attribute and now this is
going to point to a Linc's container and then this will point to a link.
So we go with the ref and we go with links.
And so once I have both of these, what I would want is every time the value for shoaling changes,
I would want to run my usufruct.
So what we need to do is import usufruct, which of course we already did.
Then we go with years of fact.
It is our callback function, of course.
And then I'm going to say every time the show links changes, I would want to run my callback function
and essentially in a callback function, what I would want is check the height for the length.
And that is very important.
We're not talking about links container, so we'll use the height of the length to adjust the height
of the container.
And the way we can check the height for the length is in the following way.
So I'm going to come up with some kind of name of the variable.
So height seems like a good name.
And then we go with Length Araf.
So I'm talking about this guy over here.
Then remember the node was in the current.
Correct.
And then in Scotland we have this function of get bounding and then client and then erect like so and
what this does it return some awesome values.
So we're going to go with Longsight.
When we're here, let's just check it out on a bigger screen and I mean, it's not going to be that
big, but if we go with console and if I click, I mean, this value should be changing, by the way.
Of course, I'm in a complete one.
My.
So if we go here and not if we inspect console, we should see some progress.
So what are these values?
Well, this is going to be the X, coordinate the Y, coordinate the width as well as the height.
So this tells me, hey, this is the height for Mylan's.
So what I would want is to grab this volume.
And that's why I'm looking for the height property from that object.
And then I would want to manually update the container.
So I'll always check the length, what is the height for the length?
And then depending on that, I will change the height for the length container.
However, I would want to do that in the condition where I'm going to say if show is true, that means
that I would want to display the links.
Correct.
And if that is the case, I'm going to go for my container.
Then I remember node was in the current one.
Then we'll do the inline style again.
This is just JavaScript where we go with style and then we're looking for the height property and that
is equal.
And now I'm going to set up my template string and I'm going to say length, height.
So whatever.
I'm getting back as height, by the way, where we have to get bounding client tracked.
Since I would want to access that property, I'm just going to go with height then.
This is coming from the object right here.
And then I'm going to go to my variable lengths, height, and then I'll add pixels.
However, if the shoaling is not true, what I would want is lnx container RF than current.
And then we go with style and then height and I will be equal to zero pixels.
So we go here with zero pixels like so.
And now what.
You'll notice that once the show length changes we're going to check the height for the length, for
the length.
So the unordered list, not the container.
And then depending what is the value for the show length will adjust the height for the container.
So now check it out.
I can see all my five links and what's really cool.
And of course, the change is happening over time.
So now if I go to data, for example, coming out and now I only have four links, you'll notice that
our functionality still works.
But now I can clearly see my four oinks.
See how we're adjusting the height for the container, depending on how many links we have.
And Pugach that I would want to mention, first of all.
If you navigate to infectiousness, you'll notice that when we talk about the media, query the eight
hundred pixels, we must this height order and then important.
Now, the reason why we're adding important because in here, this is in line.
So we need to make sure that we overwrite any values in our index.
And the reason why we're adding that, because if your comment is out and if you'll test it out on a
bigger browser window, you'll notice that if, for example, I hide my links by default, I'm not going
to be able to see them on a big screen.
Why?
Well, because now the height, of course, is set to zero.
That's why in the US we always need to change it when the screen size gets bigger.
So always, always make sure you do that.
Otherwise, if you hide the links on a small screen, you won't be able to see them on a big screen.
And then the second thing that I would want to add is the reason why we have this inclosing there.
And that's the one that we're adjusting to hide, is because if you have only the on order list, because
in the success, you already have the height of zero.
Remember, for the container, we right away added the height of zero.
When you will be checking for that value and the user, it will also come back as zero.
So you won't be able to adjust the height depending on it.
Now, just the shock that if we go with console log and I'm looking for links, container container
rough and I'm looking for current, of course, then again, the function and then I would want to check
the heart, OK, or I can just check the whole object.
Doesn't matter what you'll notice that once you click.
On the button, well, the height is going to be zero, so you won't be able to do that functionality
if you don't have that apparent one.
OK, so you must have the parent because you'll be able to access those links inside of it.
So previously, remember, we were able to access the height because for the links, the height came
back as some kind of.
So if you won't have that parent one, you won't be able to do that, because in this one right away
is zero.
OK, hopefully that makes sense.
And this is how we can set up the knife, toggle on a small screen using use or.