1
00:00:00,220 --> 00:00:04,410
Nicely done on completing the use of part of the story.

2
00:00:04,890 --> 00:00:12,000
And before we jump over the project and start practicing by building something useful, I would want

3
00:00:12,000 --> 00:00:14,160
to cover one more topic.

4
00:00:14,430 --> 00:00:19,560
And that is not going to be a hook or it is going to be a very important topic.

5
00:00:19,560 --> 00:00:22,380
And that is conditional rendering.

6
00:00:22,680 --> 00:00:31,410
And essentially what that means is that we will display different components or different content based

7
00:00:31,650 --> 00:00:33,750
on some condition.

8
00:00:34,020 --> 00:00:36,330
And then once we cover this topic.

9
00:00:36,510 --> 00:00:41,970
Yes, then we'll right away jump over to project and practice it.

10
00:00:42,210 --> 00:00:46,770
So let's start first by importing a specific file.

11
00:00:47,550 --> 00:00:51,210
And you can probably already guess that we're looking for folder number three.

12
00:00:51,480 --> 00:00:53,070
The name is Conditional Rendering.

13
00:00:53,070 --> 00:00:59,290
Of course, we're working in set up and we're looking for multiple returns file.

14
00:00:59,670 --> 00:01:03,390
So here in the U.S., I'm going to import again.

15
00:01:03,390 --> 00:01:05,740
I'll call the setup from online.

16
00:01:05,760 --> 00:01:06,990
We're looking for a tutorial.

17
00:01:07,020 --> 00:01:11,840
We're looking for additional rendering and the setup, of course.

18
00:01:12,120 --> 00:01:15,800
And finally, the multiple returns file.

19
00:01:16,200 --> 00:01:16,860
And I'm here.

20
00:01:16,860 --> 00:01:21,660
Let's ORENDER or set up component and let's see what we've got.

21
00:01:22,020 --> 00:01:26,030
And you should see on the screen simple multiple returns.

22
00:01:26,520 --> 00:01:28,720
So what is happening over here?

23
00:01:29,010 --> 00:01:35,700
Well, if you take a look at the component, you know that it is a function, correct.

24
00:01:36,210 --> 00:01:40,440
Now, what can we do in function as far as the returns?

25
00:01:41,100 --> 00:01:43,460
Well, we can have no returns.

26
00:01:43,470 --> 00:01:47,760
Of course, that just means that we're returning undefined, which will be an issue.

27
00:01:47,880 --> 00:01:54,510
So if all comes out where you know that there's going to be a big fat issue, however, what it also

28
00:01:54,510 --> 00:02:03,690
means that we can have multiple returns and based on some condition, I can, for example, return one

29
00:02:03,690 --> 00:02:04,440
piece of content.

30
00:02:04,770 --> 00:02:10,110
And if the condition is not met, then of course I can return something else.

31
00:02:10,560 --> 00:02:12,870
So how is that going to look like?

32
00:02:13,020 --> 00:02:22,320
Well, I could simply say before the return, before the multiple returns, I can just return a hello

33
00:02:22,320 --> 00:02:22,710
world.

34
00:02:22,890 --> 00:02:23,340
Correct.

35
00:02:23,850 --> 00:02:26,010
And everything is going to work nicely.

36
00:02:26,190 --> 00:02:28,140
I have hello World Y one.

37
00:02:28,140 --> 00:02:35,340
Because in JavaScript we know that once we have our first return and of course everything else is just

38
00:02:35,340 --> 00:02:35,790
ignored.

39
00:02:36,330 --> 00:02:37,430
So those would be the basics.

40
00:02:37,470 --> 00:02:41,910
However, what we're looking for is some kind of condition.

41
00:02:42,240 --> 00:02:48,300
And of course, based on that condition, then we are returning some type of content.

42
00:02:48,660 --> 00:02:49,770
So how is it going to look like?

43
00:02:49,800 --> 00:02:55,260
Well, the most basic example, we're just going to go here with loading.

44
00:02:56,480 --> 00:03:01,890
And certainly not by default, will set our loading to be true.

45
00:03:02,570 --> 00:03:03,520
So I'll see you.

46
00:03:03,650 --> 00:03:05,480
Loading is true.

47
00:03:05,720 --> 00:03:12,140
And once I have my street value, I'm simply going to set up a condition where if loading is true,

48
00:03:12,590 --> 00:03:14,710
then I would want to return.

49
00:03:14,750 --> 00:03:19,400
I don't know, a heading to with text of loading like so.

50
00:03:19,730 --> 00:03:28,840
However, if the loading is not true, then I'll simply return the heading to with multiple turns.

51
00:03:29,030 --> 00:03:35,500
If the condition is met then we are returning a heading to still have our loading dock.

52
00:03:36,010 --> 00:03:42,200
And then if the condition is not true, which of course will change it in a second, then we'll have

53
00:03:42,200 --> 00:03:44,050
our multiple returns.

54
00:03:44,330 --> 00:03:47,030
So the moment I have the loading, why while.

55
00:03:47,030 --> 00:03:53,270
Because the loading is true now of course I'm returning this heading to please keep in mind you can

56
00:03:53,270 --> 00:03:54,920
set up the whole app in here.

57
00:03:55,700 --> 00:04:01,410
As far as this return, nothing stops you from adding divorced from married models or whatever you want.

58
00:04:01,430 --> 00:04:09,560
I mean, you can go as crazy as you feel, OK, just keep in mind that if the condition is not met,

59
00:04:09,980 --> 00:04:12,440
then of course, you'll have your default one.

60
00:04:12,950 --> 00:04:19,100
So your turn the to with multiple turns again, you can set it up.

61
00:04:19,100 --> 00:04:20,390
The whole application here.

62
00:04:20,690 --> 00:04:24,080
And the way we can test that is by just passing and false.

63
00:04:24,410 --> 00:04:30,860
And of course we have multiple turns and this is somewhat typical where there's some kind of loading

64
00:04:30,860 --> 00:04:38,600
set you literally can't check for loading or if the user exists or something of that sort.

65
00:04:38,840 --> 00:04:43,760
And then if the condition is met, then you miss one part of the application.

66
00:04:44,060 --> 00:04:47,450
So one giant component with multiple other components.

67
00:04:47,720 --> 00:04:54,710
And that if the condition is not met, then of course, you display a sign, a page or something of

68
00:04:54,710 --> 00:04:55,360
that nature.

69
00:04:55,790 --> 00:05:02,160
So hopefully the basics are clear where since it is a function, we're going to multiple returns.

70
00:05:02,570 --> 00:05:07,400
Now, of course, if we don't set the condition, then we'll just return the first one because all the

71
00:05:07,400 --> 00:05:09,090
other ones will be ignored.

72
00:05:09,740 --> 00:05:17,480
However, if we start setting up conditions, nothing stops us from setting up returns within those

73
00:05:17,480 --> 00:05:17,940
conditions.

74
00:05:18,500 --> 00:05:23,920
So if the condition is met, we'll have one return if the condition is not met.

75
00:05:24,170 --> 00:05:27,200
And of course, we have a different type of return.

76
00:05:27,410 --> 00:05:33,400
And that way, of course, you can make your components way more dynamic because now they're not static.

77
00:05:33,770 --> 00:05:38,840
Now they return based on some type of condition.