1
00:00:01,460 --> 00:00:06,230
Without a doubt, we could probably condense down these four different functions into just one reusable

2
00:00:06,230 --> 00:00:06,710
function.

3
00:00:07,130 --> 00:00:12,050
So, for example, maybe we could build some reusable function right here called something like show

4
00:00:12,050 --> 00:00:12,800
component.

5
00:00:13,880 --> 00:00:19,250
And maybe you could take two arguments, maybe the route or the path name to watch for and the component

6
00:00:19,250 --> 00:00:24,380
we want to show, and then instead of here, we could write out a little ternary expression and return

7
00:00:24,380 --> 00:00:28,760
it to get, say, if window location, half name.

8
00:00:30,900 --> 00:00:32,640
Equals, equals, equals roots.

9
00:00:33,000 --> 00:00:34,580
Then let's return the component.

10
00:00:35,040 --> 00:00:36,340
Otherwise return null.

11
00:00:37,110 --> 00:00:42,000
So we could probably make use of this function right here to control showing all these different functions

12
00:00:42,000 --> 00:00:42,630
or components.

13
00:00:42,650 --> 00:00:43,590
We've now wired up.

14
00:00:44,490 --> 00:00:50,490
But this is not really a super react style approach, rather than making some stand alone function.

15
00:00:51,060 --> 00:00:57,510
Maybe you could try making a component, a component that would decide when to show some other component

16
00:00:57,660 --> 00:01:00,690
based upon the current path name that the user is visiting.

17
00:01:01,320 --> 00:01:02,100
Let's try that out.

18
00:01:02,130 --> 00:01:03,330
Just bear with me for a moment.

19
00:01:04,360 --> 00:01:05,670
Inside my component's directory.

20
00:01:05,760 --> 00:01:08,760
I'm going to make a new file called Route Dot J.S..

21
00:01:10,240 --> 00:01:13,360
And then inside of here, we're going to create a new component called Root.

22
00:01:14,900 --> 00:01:16,400
Let's not forget to import.

23
00:01:17,480 --> 00:01:18,320
React at the top.

24
00:01:20,230 --> 00:01:22,030
And then we will export route.

25
00:01:26,550 --> 00:01:29,370
Now, route is probably going to need two different props.

26
00:01:29,670 --> 00:01:31,350
The first will probably be a path.

27
00:01:31,470 --> 00:01:36,540
So essentially when we want to show some component and then the other prop would probably be the component

28
00:01:36,540 --> 00:01:38,340
that we want to conditionally display.

29
00:01:38,970 --> 00:01:43,590
So I'm going to receive those as props called Path and children.

30
00:01:44,510 --> 00:01:47,850
I'll show you why we are receiving one as a prop called Children in just a moment.

31
00:01:49,580 --> 00:01:55,010
Then inside of here, we can write out basically that same kind of ternary expression, we could say

32
00:01:55,010 --> 00:01:57,860
return window location.

33
00:02:00,110 --> 00:02:03,830
Half name equals equals equals path.

34
00:02:04,520 --> 00:02:09,290
And if that is true, then let's return children otherwise return.

35
00:02:09,350 --> 00:02:09,770
No.

36
00:02:11,370 --> 00:02:16,050
You'll notice that inside of here we have not written out any jail sex whatsoever because that we do

37
00:02:16,050 --> 00:02:18,480
not actually need to import reaction to this file.

38
00:02:18,930 --> 00:02:21,680
We only need to import react when we are writing J.S. X.

39
00:02:22,210 --> 00:02:25,620
So because we do not have any G.S. X, I will delete that import for right now.

40
00:02:27,250 --> 00:02:33,280
Let's now save this and then go back over to our APJ as file and try to make use of this new route component.

41
00:02:35,220 --> 00:02:37,500
Back inside of Abdul G.S. at the very top.

42
00:02:38,660 --> 00:02:42,890
I will import route from component's route.

43
00:02:45,530 --> 00:02:51,170
And then back at our app component itself, I'm going to replace these four different function calls.

44
00:02:51,910 --> 00:02:57,380
So instead of four different function calls, we're going to show that new root component or separate

45
00:02:57,380 --> 00:02:59,420
times for each one.

46
00:02:59,480 --> 00:03:04,190
We'll provide a path PROPP that is going to be when we want to show some components.

47
00:03:04,940 --> 00:03:07,790
So for the first one, the accordion, we want to show the accordion.

48
00:03:07,820 --> 00:03:11,120
Whenever user goes to a path of just forward slash.

49
00:03:12,650 --> 00:03:17,000
Then to tell the roots when we want to show the accordion or which component we want to show, we will

50
00:03:17,000 --> 00:03:20,840
provide the accordion inside of the root tag.

51
00:03:21,500 --> 00:03:24,790
And I will provide what we call the prop for the accordion.

52
00:03:24,800 --> 00:03:25,520
It was items.

53
00:03:29,830 --> 00:03:36,250
As a quick reminder, whenever we provide one jail sex inside of another jail sex tag, that inner element

54
00:03:36,250 --> 00:03:40,090
right there is provided to the outer one as a prop called children.

55
00:03:40,700 --> 00:03:46,900
So right now, the accordion element would show up inside of our root component as a prop called children.

56
00:03:47,710 --> 00:03:53,200
That's why we are receiving a very special prop with the name of children and returning it if we want

57
00:03:53,200 --> 00:03:54,880
to display some inner component.

58
00:03:57,030 --> 00:03:57,230
OK.

59
00:03:57,380 --> 00:03:59,130
Let's now say this and see how we're doing.

60
00:04:00,860 --> 00:04:04,200
If we now look back over and go to just localhost 3000.

61
00:04:05,990 --> 00:04:08,450
We'll then see our recording component up here on the screen.

62
00:04:09,020 --> 00:04:09,230
OK?

63
00:04:09,470 --> 00:04:10,490
That actually looks pretty good.

64
00:04:11,270 --> 00:04:15,070
Let's try also putting this together for our Wikipedia search list.

65
00:04:16,190 --> 00:04:17,600
It's I'll put in another route.

66
00:04:18,110 --> 00:04:21,410
I'll see if it user ever goes to a path of flash list.

67
00:04:24,100 --> 00:04:25,960
Let's show the search component.

68
00:04:27,940 --> 00:04:28,700
So say that.

69
00:04:29,120 --> 00:04:31,970
Now we should build to go to a local host, three thousand list.

70
00:04:32,930 --> 00:04:33,770
And hey, there we go.

71
00:04:33,780 --> 00:04:35,090
There's the Wikipedia search.

72
00:04:36,090 --> 00:04:37,710
We can repeat it again for.

73
00:04:39,630 --> 00:04:40,840
Flash dropped down.

74
00:04:43,410 --> 00:04:44,520
And we'll show the dropdown.

75
00:04:45,860 --> 00:04:48,860
And then finally or translate.

76
00:04:52,780 --> 00:04:57,550
Now, our drop down component right now is still not going to work until we provide it a couple of different

77
00:04:57,550 --> 00:04:58,090
properties.

78
00:04:58,500 --> 00:05:00,070
Let's first just try out the translate.

79
00:05:00,460 --> 00:05:01,780
I'm going to say this very quickly.

80
00:05:03,010 --> 00:05:06,280
I'll try out flash translate and we see a translation.

81
00:05:06,720 --> 00:05:11,620
And then in theory, if we go to dropdown right now, we'll see an error until we provide some appropriate

82
00:05:11,620 --> 00:05:12,310
props to it.

83
00:05:13,210 --> 00:05:17,020
Well, let's go fix up the drop down component, cause it looks like otherwise everything is working

84
00:05:17,020 --> 00:05:18,730
out pretty well with this new approach.

85
00:05:19,720 --> 00:05:23,740
So at this drop down component right here, going to provide a couple of different props to it.

86
00:05:26,020 --> 00:05:28,960
First, I will put in a label of select a color.

87
00:05:30,090 --> 00:05:35,850
I'll provide options of options, remember, we had defined options as an array at the very top, this

88
00:05:35,850 --> 00:05:36,180
file.

89
00:05:37,080 --> 00:05:40,950
We also have to provide a selected piece of states of selected.

90
00:05:42,160 --> 00:05:49,250
And in on election change or was it on selected change, it was on selected, yep.

91
00:05:49,460 --> 00:05:53,230
Unselected, though, on selected change.

92
00:05:54,480 --> 00:05:59,820
Be set, selected and, well, just very quickly defined, these selected and set selected piece of

93
00:05:59,820 --> 00:06:00,210
state.

94
00:06:01,080 --> 00:06:01,590
So.

95
00:06:02,690 --> 00:06:04,490
Elected that selected.

96
00:06:07,460 --> 00:06:10,570
And I'll give this default value of options at zero.

97
00:06:11,960 --> 00:06:14,180
Guess now we can test out, drop down very quickly.

98
00:06:15,970 --> 00:06:16,540
All right, there we go.

99
00:06:16,600 --> 00:06:19,630
So there's the dropdown and we can toggle between all these different colors.

100
00:06:20,500 --> 00:06:20,800
All right.

101
00:06:20,830 --> 00:06:25,930
So all we really did here was extract that routing logic into a reusable component.

102
00:06:26,650 --> 00:06:29,530
Now, right now, it might seems seem like that's a little bit overkill.

103
00:06:29,620 --> 00:06:31,580
Why would we create a separate component for this?

104
00:06:31,930 --> 00:06:36,880
But as you'll see very quickly, there's actually a lot of interesting things we can do when we define

105
00:06:37,030 --> 00:06:40,870
a routing component and we can insert it anywhere inside of application.

106
00:06:42,180 --> 00:06:42,420
All right.

107
00:06:42,510 --> 00:06:44,430
Let's take a quick foser here when we come back.

108
00:06:44,460 --> 00:06:48,570
Next video, we'll start putting together the header at the very top of our screen.