1
00:00:00,810 --> 00:00:05,730
In this section we're going to go over the solution to this extraction problem where we want to essentially

2
00:00:05,970 --> 00:00:12,020
pull out this little div right here that's generating a nice looking background for both of these segments.

3
00:00:12,210 --> 00:00:16,760
So I'm going to create a new component underneath our app one we can put it above.

4
00:00:16,770 --> 00:00:17,660
It really doesn't matter.

5
00:00:17,670 --> 00:00:18,770
It's totally up to you.

6
00:00:19,050 --> 00:00:21,200
Oh go ahead and put it right underneath down here.

7
00:00:21,490 --> 00:00:30,430
So I'm going to make a new component old segment like so I know that I'm probably going to have to refer

8
00:00:30,430 --> 00:00:35,800
to my prop's object inside of here so I can make sure that I receive that prop's object as the first

9
00:00:35,800 --> 00:00:43,490
argument to the segment component then inside of your I'm going to return a div with a class name that

10
00:00:43,490 --> 00:00:47,860
contains the same class names that we are trying to extract right there.

11
00:00:47,900 --> 00:00:54,790
So I'm going to give it class names of UI placeholder segment like so and then I'll close off that div

12
00:00:55,410 --> 00:00:59,580
and inside the div I'm going to reference props dot children.

13
00:00:59,580 --> 00:01:03,040
So this is a very simple very straightforward component right here.

14
00:01:03,060 --> 00:01:07,920
It's just going to show a div with a couple of very particular class names and then show some number

15
00:01:07,920 --> 00:01:09,330
of children inside of it.

16
00:01:09,570 --> 00:01:14,280
Even though this might seem like a extremely basic component and it might seem like too much trouble

17
00:01:14,280 --> 00:01:19,140
to even put together like I mentioned very briefly in the last video it would save you the developer

18
00:01:19,170 --> 00:01:22,050
from having to memorize these class names and type them out.

19
00:01:22,050 --> 00:01:27,330
You can just instead say oh yeah I want to show a segment and then reference this segment component.

20
00:01:27,330 --> 00:01:33,320
So now that we've put this thing together we're going to go back over and find where ever we have that

21
00:01:33,320 --> 00:01:35,810
div with the class name of UI placeholder segment.

22
00:01:35,810 --> 00:01:37,210
So there's one right there.

23
00:01:37,400 --> 00:01:42,530
I'm going to delete that div and replace it with a segment component and then I'll make sure that I

24
00:01:42,530 --> 00:01:49,560
find the closing div delete that one as well and put a closing segment tag instead.

25
00:01:49,560 --> 00:01:53,730
And now I should see the same content that I had before.

26
00:01:53,790 --> 00:01:55,210
So it's definitely working out.

27
00:01:55,340 --> 00:01:58,520
I can make sure that I replace this other div over here as well.

28
00:01:58,770 --> 00:02:05,640
So same exact div I'll say segment and then I'll make sure that I replace the closing div right there

29
00:02:05,640 --> 00:02:08,600
with a closing segment tag as well.

30
00:02:09,550 --> 00:02:10,300
All right there we go.

31
00:02:10,300 --> 00:02:14,860
Looks like we've got the same exact thing we had before but now we've got this nice reusable segment

32
00:02:14,860 --> 00:02:18,260
component that we can reuse on future projects if we want to.

33
00:02:18,670 --> 00:02:19,620
All right so this looks good.

34
00:02:19,630 --> 00:02:24,270
Last thing I'm going to do is check my solution.

35
00:02:24,470 --> 00:02:25,640
And there we go.

36
00:02:25,640 --> 00:02:27,530
Looks like my solution was correct.

37
00:02:27,530 --> 00:02:27,770
All right.

38
00:02:27,770 --> 00:02:29,230
So I hope you got this solution.

39
00:02:29,300 --> 00:02:33,080
Let's take a quick pause right here and we're going to start to move on to our next big topic in the

40
00:02:33,080 --> 00:02:33,740
next video.