All language subtitles for 056 Show_Hide Component.en_US

All right, and once we're clear with ternary operator now, I want to set up a small example where

we will toggled component in this case and in a process, I'll try to hammer home why we need the up

function.

So there's going to be a little bit of repetition.

Eventually we will set up again the event listener on the window and I'll showcase why it is important

to use the cleaning function because setting up the dependency list empty is not always going to save

us.

All right.

Now, what we're looking for in the address is file number three.

So still conditional rendering still set up for in this case I'm looking for and then for now, of course,

show and hide.

So the moment you're on it because of this is what you're going to see?

No, I'm going to navigate the files again in the setup folder, file number three, show and hide.

And first, I would want to set up a state value.

So, again, we have to use that.

Let's go and say const show and then set show function.

All right.

Not bad.

And that is equal to use state.

And then by default, it is going to be false.

All right.

Now, as far as the return, let's make it a bit more interesting.

More first of I'll set up my fragment and then we'll start with the button.

I'll say that there is a class name for the button and the class name is Button, of course.

And then remember how we were toggling the state value again.

We'll do the same thing where we have unclick, then we'll have our inline function and then let's run

that show.

And each and every time we'll click, we'll set the new state value opposite to the current one.

So if it is false, then it's going to become true.

If it is true and it's going to become false.

And in here, let's type show and then forward slash.

Right.

Let's say.

OK, we should have the button.

Everything is awesome, and now, depending on that shock value, I will show or hide another component.

So that is going to be the difference where I previously I mentioned multiple times that we're not limited

to the moment.

So, of course, this is the example where we will toggle the react component and for the time being,

it's simply going to be a div.

So let's go with there and I'll add a little bit of styling here.

Minimal go with the margin top and that is going to be equal to two arms and then within a div let's

again go with window window and then we'll check for those pixels.

So for the time being of course we haven't set up anything.

So I'm just going to say size and color.

So once we save, we should see something on a screen.

But of course we don't because we haven't implemented that show.

So what I would want here is set up curly calibrations.

And then also, if show is true, then we use the and operator and then I would want to display the

item component.

And of course, I do need to be a bit more specific here where it is a component and of course, it

is hidden by default.

But in the moment we click, check it out.

Now I have a window and size.

So as you can see now I'm toggling the component.

Correct.

And it is important because of two reasons.

First, the fact that we're not limited to just HDMI elements like we had in the previous example.

And the second thing I would want to hammer home the fact that we need to use the cleaning function

when we're setting up some kind of side effect that needs to be cleaned up, which in our case is still

going to be that event listener on the window.

So within the item, not within the show and hide component within the item, what I want is to set

up that size state variable.

So again, we go here with cost and size and set size like so and now we're using use state.

And again, let's check for that window in here with Beautiful.

And then we will set up each and every time when we render the component our use of.

So we're going to go here with you.

In fact, now we have our callback function and just to showcase that it's not going to work if we simply

add our empty array.

Now, let me add here a window and then the event.

Let's not show as will be resizing the window.

We'll be listening for this rent.

So resize and then we'll run our check out.

Like I said, a little bit of repetition because we already set this up when we worked with you.

Now, of course, let's come up with our function.

So it's going to be check size function.

It's not going to be looking for any parameters.

However, each and every time we will resize the window, I will set my state voucher equal to a window

and run in with OK, beautiful.

And I remember when we covered usufruct, I said that even though in that particular scenario, the

empty dependancy array saved us because we were not toggling the component.

Essentially the component was there.

And the first time the component rendered, we set up the event listener and we were good to go.

However, the problem now is going to be that we will be toggling this component.

So even though we run this only once, because we will toggle decomposing, essentially we will set

up multiple event listeners.

And I guess in order to see better what is happening, let's just go with size here.

Adding to it now, once I click, check it out.

Now, of course, the window is four hundred and sixty two, by the way.

We can add pixels as well if you want.

So let me go here with pixels again.

I show.

And then as I'm going to be increasing or decreasing the size of the window, of course of this value

will change.

Now the problem is a little bit different where every time as I'm clicking on toggling the component.

Correct.

And if we check out the elements and then around lessness and then resize notice, is this the behavior

that we're looking for?

No, of course not.

So even though empty array saved us in the previous example because we were not toggling the component,

this is why this cleanup function is so important, because even though this runs only once, because

we're toggling the component, we run every time we show the component.

So that's why, remember, we need to go with return and we have the function that runs when, of course,

the component is removed.

And this case, of course, once we removed from the norm and then we'll go with window that removing

and Lessner.

And again, I'm looking for resize and Oleron check size.

So now what?

You'll notice that once you navigate here, you can see that there is no eventless there.

And that should be the case because the component is not displayed.

Then at the moment we show the component.

Then of course, we set up the first event listener.

But then as I'm clicking notice, I'm not going to be adding those eventless.

So there's always going to be one because we have our Klina function.

So once we remove the component from the DOM using the show and toggle, then of course we'll also remove

our event.

WESNER So that's how we can toggle components in Riak using the and operator.

And also that's why it is so, so, so, so, so, so crucial using the clean up function.