1
00:00:01,090 --> 00:00:05,100
In this video there's one less thing that I want to touch upon around our app component.

2
00:00:05,300 --> 00:00:07,280
Let's go down to the render function.

3
00:00:07,310 --> 00:00:11,690
Remember inside of your We've got those two statements to check for the case in which we have a err

4
00:00:11,690 --> 00:00:16,950
message and not allowed Tud or an error message in a latitude and our spinner.

5
00:00:17,150 --> 00:00:21,810
Now at present there's something inside of your That's kind of deceptively hidden but it's something

6
00:00:21,840 --> 00:00:24,230
would make changing this app component in the future.

7
00:00:24,260 --> 00:00:26,250
Really really challenging.

8
00:00:26,270 --> 00:00:31,520
Let's say that for some crazy reason we get a new requirement on this project and the new requirement

9
00:00:31,730 --> 00:00:37,400
is that no matter what we're showing you get the error message via the seasoned display or the spinner

10
00:00:37,550 --> 00:00:42,350
no matter what we have to show a big red border around the edge of the page.

11
00:00:42,350 --> 00:00:44,790
I know that sounds crazy but let's just imagine it for a second.

12
00:00:44,960 --> 00:00:51,800
So essentially I would want to have something like this say border 10 x something like that no matter

13
00:00:51,800 --> 00:00:54,870
what I always want to see a border going around the edge.

14
00:00:54,950 --> 00:01:01,540
Now in order to do so we would essentially have to find these three different return cases inside our

15
00:01:01,550 --> 00:01:07,850
render function and surround or wrap each of these cases with maybe some device that has a class name

16
00:01:08,030 --> 00:01:10,530
that would apply the actual border.

17
00:01:10,550 --> 00:01:12,920
So let's take a look at what that would look like very quickly.

18
00:01:12,920 --> 00:01:14,820
Now don't type out the code that I'm about to write.

19
00:01:14,840 --> 00:01:17,580
I'm just going to type this out very quickly and then undo these changes.

20
00:01:17,600 --> 00:01:19,490
I want to show you very quickly.

21
00:01:19,700 --> 00:01:23,510
So here's what we'd have to write to get that border in here.

22
00:01:26,120 --> 00:01:27,590
We'd have to put a div up there.

23
00:01:27,660 --> 00:01:34,420
We you'd have to put that same div on the next return statement down here and wrap the season display

24
00:01:36,840 --> 00:01:43,710
and we would have to put the same diff around the spinner like so that's more or less what we would

25
00:01:43,710 --> 00:01:48,990
have to do now without a doubt we could probably figure out some way to get a CSSA class on some Piran

26
00:01:49,020 --> 00:01:50,610
element to the app component.

27
00:01:50,610 --> 00:01:55,950
But I think you can get the idea here if we want to make sure that no matter what case we fall into

28
00:01:56,340 --> 00:02:01,140
the error message the seasoned display or the spinner was always wrapped with some particular element

29
00:02:01,380 --> 00:02:04,580
we would have to duplicate that element in all three locations.

30
00:02:04,620 --> 00:02:05,700
And that's my guess.

31
00:02:05,700 --> 00:02:09,190
No that's not something we're going to really ever be doing.

32
00:02:09,190 --> 00:02:11,900
So we're going to figure a way to work around this.

33
00:02:11,910 --> 00:02:14,050
I'm going to first begin by doing those little dives.

34
00:02:14,060 --> 00:02:16,040
I just stuck in here as a quick example.

35
00:02:17,590 --> 00:02:20,130
And there we go.

36
00:02:20,500 --> 00:02:20,900
All right.

37
00:02:21,040 --> 00:02:26,170
So really the root of our problems here is the fact that we have all of this kind of conditional logic

38
00:02:26,200 --> 00:02:28,130
inside of a render function.

39
00:02:28,150 --> 00:02:32,440
So in order to fix this problem I'm going to create a helper function.

40
00:02:32,440 --> 00:02:36,520
It's going to be a helper function that's going to contain all of the code that is currently inside

41
00:02:36,520 --> 00:02:37,880
the render method.

42
00:02:37,900 --> 00:02:39,190
Let's make this helper function.

43
00:02:39,220 --> 00:02:42,280
And then you'll very quickly see where we are going with this.

44
00:02:42,340 --> 00:02:47,480
So I'm going to make a helper function inside this body called about.

45
00:02:47,650 --> 00:02:49,930
I don't know render body but render content.

46
00:02:49,930 --> 00:02:50,920
That's a good reasonal then.

47
00:02:52,670 --> 00:02:57,380
And then decide if you're going to take the three different cases that we fell into from the render

48
00:02:57,380 --> 00:03:02,230
method are going to cut them and put them up into the rendered content instead.

49
00:03:03,760 --> 00:03:07,740
Then inside of my render method I'm going to remove the comment above it.

50
00:03:08,510 --> 00:03:17,200
And inside there I'm going to return some div like let's say a div that gets a border red like so.

51
00:03:18,490 --> 00:03:25,830
And then inside that div I can call this dot render content like so.

52
00:03:25,840 --> 00:03:31,540
So we still have all the same logic we had before but now it's all been centralized in one location

53
00:03:31,790 --> 00:03:36,730
so that no matter what case we fall into here be it the showing the error message showing the season

54
00:03:36,730 --> 00:03:41,410
display or showing the spinner we are always going to surround the result with a div that has a class

55
00:03:41,410 --> 00:03:42,740
name of border red.

56
00:03:43,150 --> 00:03:49,870
So in general anytime we make a component we always try as much as possible to have to not have multiple

57
00:03:49,900 --> 00:03:52,300
return statements inside the render method.

58
00:03:52,300 --> 00:03:57,490
For exactly this reason we might very easily fall into a condition where no matter what we always want

59
00:03:57,490 --> 00:04:02,940
to return what gets wrapped or what gets returned from a component with some common element like so

60
00:04:03,490 --> 00:04:08,570
if we have multiple return statements inside the render method doing that becomes very challenging.

61
00:04:08,950 --> 00:04:13,510
If we ever have to have conditional logic as you see right here we're always going to instead put it

62
00:04:13,510 --> 00:04:15,020
into a helper method.

63
00:04:16,640 --> 00:04:21,320
So now when the render method gets called we're going to show the div we're going to call render content

64
00:04:21,470 --> 00:04:23,050
we figure out what case we are in.

65
00:04:23,090 --> 00:04:25,640
And then we return the appropriate component.

66
00:04:26,060 --> 00:04:30,350
So let's save this and we're going to just make sure that everything still works.

67
00:04:30,350 --> 00:04:35,150
I remember that there is no class name of border ready here no border is going to actually show up.

68
00:04:35,150 --> 00:04:38,000
This was just an example to help you understand that.

69
00:04:38,030 --> 00:04:43,010
Yeah sometimes you want to wrap everything that comes out of component with some common element like

70
00:04:43,010 --> 00:04:43,840
so.

71
00:04:44,080 --> 00:04:46,920
So I can flip back over now if I refresh the page.

72
00:04:46,960 --> 00:04:48,950
Yup everything still works as expected.

73
00:04:48,980 --> 00:04:52,170
I couldn't allow and I still see my content appear.

74
00:04:52,610 --> 00:04:52,940
OK.

75
00:04:52,970 --> 00:04:53,750
So that's pretty much it.

76
00:04:53,750 --> 00:04:56,350
That is basically our entire app.

77
00:04:56,600 --> 00:05:01,790
Now we've gone through a tremendous number of topics inside this application.

78
00:05:01,790 --> 00:05:08,340
We spoke about classes state we saw lifecycle methods we saw default props over here.

79
00:05:08,420 --> 00:05:10,510
We saw these kind of config objects.

80
00:05:10,520 --> 00:05:11,900
We did a lot here.

81
00:05:12,110 --> 00:05:14,760
So let's take a quick pause and then come back in the next section.

82
00:05:14,780 --> 00:05:18,500
We're going to do a quick wrap up on some of the big topics that we went through and we'll go through

83
00:05:18,530 --> 00:05:20,110
a couple of exercises.

84
00:05:20,160 --> 00:05:22,070
So quick pause and I'll see you in just a minute.