All language subtitles for 052 Multiple Returns - Basics.en_US

Nicely done on completing the use of part of the story.

And before we jump over the project and start practicing by building something useful, I would want

to cover one more topic.

And that is not going to be a hook or it is going to be a very important topic.

And that is conditional rendering.

And essentially what that means is that we will display different components or different content based

on some condition.

And then once we cover this topic.

Yes, then we'll right away jump over to project and practice it.

So let's start first by importing a specific file.

And you can probably already guess that we're looking for folder number three.

The name is Conditional Rendering.

Of course, we're working in set up and we're looking for multiple returns file.

So here in the U.S., I'm going to import again.

I'll call the setup from online.

We're looking for a tutorial.

We're looking for additional rendering and the setup, of course.

And finally, the multiple returns file.

And I'm here.

Let's ORENDER or set up component and let's see what we've got.

And you should see on the screen simple multiple returns.

So what is happening over here?

Well, if you take a look at the component, you know that it is a function, correct.

Now, what can we do in function as far as the returns?

Well, we can have no returns.

Of course, that just means that we're returning undefined, which will be an issue.

So if all comes out where you know that there's going to be a big fat issue, however, what it also

means that we can have multiple returns and based on some condition, I can, for example, return one

piece of content.

And if the condition is not met, then of course I can return something else.

So how is that going to look like?

Well, I could simply say before the return, before the multiple returns, I can just return a hello

world.

Correct.

And everything is going to work nicely.

I have hello World Y one.

Because in JavaScript we know that once we have our first return and of course everything else is just

ignored.

So those would be the basics.

However, what we're looking for is some kind of condition.

And of course, based on that condition, then we are returning some type of content.

So how is it going to look like?

Well, the most basic example, we're just going to go here with loading.

And certainly not by default, will set our loading to be true.

So I'll see you.

Loading is true.

And once I have my street value, I'm simply going to set up a condition where if loading is true,

then I would want to return.

I don't know, a heading to with text of loading like so.

However, if the loading is not true, then I'll simply return the heading to with multiple turns.

If the condition is met then we are returning a heading to still have our loading dock.

And then if the condition is not true, which of course will change it in a second, then we'll have

our multiple returns.

So the moment I have the loading, why while.

Because the loading is true now of course I'm returning this heading to please keep in mind you can

set up the whole app in here.

As far as this return, nothing stops you from adding divorced from married models or whatever you want.

I mean, you can go as crazy as you feel, OK, just keep in mind that if the condition is not met,

then of course, you'll have your default one.

So your turn the to with multiple turns again, you can set it up.

The whole application here.

And the way we can test that is by just passing and false.

And of course we have multiple turns and this is somewhat typical where there's some kind of loading

set you literally can't check for loading or if the user exists or something of that sort.

And then if the condition is met, then you miss one part of the application.

So one giant component with multiple other components.

And that if the condition is not met, then of course, you display a sign, a page or something of

that nature.

So hopefully the basics are clear where since it is a function, we're going to multiple returns.

Now, of course, if we don't set the condition, then we'll just return the first one because all the

other ones will be ignored.

However, if we start setting up conditions, nothing stops us from setting up returns within those

conditions.

So if the condition is met, we'll have one return if the condition is not met.

And of course, we have a different type of return.

And that way, of course, you can make your components way more dynamic because now they're not static.

Now they return based on some type of condition.