Section 9 (React): Lesson 7 - Conditional Rendering

Описание: Hey you and welcome.

In this video we will talk about conditional rendering and react.

So let's dive right into it.

What I want to do with my code right now, I'm in the app dot TSX component and I want to make it so

that we can press the something button.

And when you press it, something shows up underneath it like a paragraph could be here or it could

be a whole new component that we create, but something underneath it shows.

Let's just take away else button.

I will put these paragraphs under the button.

They don't really have to be under, just visually it looks a little bit more like something that I

would change.

So what I what I want to do is there's two paragraphs.

When I press on something, the first paragraph should show up, which is in black right now.

And if I press on, button something again, then the red one shows up, black one disappears.

So I'm showing one or the other when the toggle happens.

So how do we do that?

Well, we have to put all that we have learned so far about props and expand on that.

We also learned a little bit about events using onClick event in the previous video.

We need to expand on that as well.

And we also need to use use state to create a state on a global level.

So let me show you what I mean on the button.

When I press it, the toggle happens.

It has a local state, but I do want that state to be written on a global level.

So there's two ways to do it right?

Either I start using use state right here and notice what I'm doing here.

I'm instead of importing from React before like I did.

I could do that and I can start using it instead of doing that.

Oops.

I'm just going to start writing you state and notice that VS code is helping me out by saying do you

want to bring in use state from React library?

In this case, yes I do press enter and it will just auto import that for me.

If this functionality is not working for you out of the box, you may need an extension.

I will go to my extensions section in VS code and there is a auto import extension this one and you

can use that.

Let me hide that.

You can use this extension, install that and that may work better for you, but I believe vs code has

it built in.

All right, enough about that.

Let me close this out.

Command W and use state.

So I'm using use state up top in app dot TSX.

I can set this default to false and I can say is toggled.

Set is toggled.

And I can pass is toggled.

To button like so and then button.

If I go to jump to or go to definition for button, I can see.

Okay it's not letting me do that here.

Okay.

So if I go to definition for button TSX, I can accept it's toggled as a prop and then pass it down

and take away state.

So that means the component is no longer stateful.

That's one way to do it.

Right and valid way to do it.

There's no right or wrong way.

I just want to show you a different way that you may see as a pattern.

So I'm going to use a callback function.

I'll close out of this, go to app dot TSX and I will have a is toggled set is toggled state still in

app dot TSX.

We do need that and I want this to be changed every time the button is clicked.

So instead of me passing it a boolean type or a string type or object type, I'm going to pass a function

to it.

So let's first create our function.

This function has to be within the function that is the app component.

It has to be within.

You cannot just create it outside and pass it down.

I mean, that may be possible, but you're getting outside of the life cycle of React component.

We want to stay inside the life cycle in case the state changes your function to change accordingly.

Right?

So that's why we're inside the function component or sorry, the app component.

And I will start a new function called handle toggle equals to anonymous function or error function.

Start the curlies and whenever this get called is toggled should be set to something.

And we don't know what that is yet.

And what I will say is when handle toggle is called, whoever calls it, this should pass me the value,

which would be a type of boolean.

So colon boolean means type of boolean and this is the value, which is the actual value being passed