1
00:00:00,860 --> 00:00:06,170
All right hopefully you had some success wrapping the other to comment details with an approval card

2
00:00:06,200 --> 00:00:07,100
element.

3
00:00:07,100 --> 00:00:09,100
Let's now go to the solution to that.

4
00:00:09,110 --> 00:00:12,510
So essentially we're just going to duplicate exactly what we did appear.

5
00:00:12,550 --> 00:00:18,010
I'm going to find the second comment detail and I'm going to wrap it with an approval card.

6
00:00:18,140 --> 00:00:22,170
I'll do the same closing tag after the common detail as well.

7
00:00:23,650 --> 00:00:29,440
And I'll make sure that I indent the comment detail then I'll make sure I do the same thing for the

8
00:00:29,470 --> 00:00:30,830
third comment as well.

9
00:00:33,310 --> 00:00:38,730
And don't forget the closing tag.

10
00:00:38,750 --> 00:00:39,040
All right.

11
00:00:39,050 --> 00:00:39,940
Well it's good.

12
00:00:40,180 --> 00:00:45,080
So now I'll save this I'll flip back over and we can see that all three comments are now being rendered

13
00:00:45,080 --> 00:00:48,510
inside of an instance of approval Eckhardt.

14
00:00:48,530 --> 00:00:53,510
Now the benefit to the approach that we used here is the fact that we set up approval card to take some

15
00:00:53,570 --> 00:00:58,940
arbitrary child in is that now we can reduce the approval card for any other purpose we want let's try

16
00:00:58,940 --> 00:01:05,780
it out right now let's say at the very top you're going to put a approval card use approval card.

17
00:01:05,860 --> 00:01:06,170
So

18
00:01:09,650 --> 00:01:17,820
and then I'm going to pass it some plain text I'll say Are you sure you want to do this.

19
00:01:18,070 --> 00:01:21,300
So notice that we don't have to pass in a re-act component to this thing.

20
00:01:21,340 --> 00:01:24,660
We can put in plain text or standard GSX as well.

21
00:01:24,940 --> 00:01:29,620
So now I can save this and I'll see we have a new card up at the top that says simply Are you sure you

22
00:01:29,620 --> 00:01:31,060
want to do this.

23
00:01:31,120 --> 00:01:34,930
In addition we can also show multiple elements inside of here.

24
00:01:35,170 --> 00:01:41,680
So I'm going to do a new line like so I'm going to put a div inside of here and I'll wrap that text

25
00:01:41,680 --> 00:01:46,070
with the div and then right above the text in still inside the div.

26
00:01:46,090 --> 00:01:54,100
I'll put in say an H for and I'll say something like warning how I can save this flip back over and

27
00:01:54,100 --> 00:01:57,060
I'll see warning and then the text that I provided.

28
00:01:57,070 --> 00:02:01,960
So by using this technique of passing children to a component and then showing the children inside of

29
00:02:01,960 --> 00:02:08,380
that child component or in this case parent we can provide as many elements as we wish or we can just

30
00:02:08,380 --> 00:02:10,570
show a single component if we wish.

31
00:02:10,570 --> 00:02:11,830
It's totally up to you.

32
00:02:12,370 --> 00:02:16,840
And the one key thing to keep in mind is that whenever we want to use this technique right here we always

33
00:02:16,840 --> 00:02:19,450
have to make sure that we go into that target component.

34
00:02:19,450 --> 00:02:23,920
In this case approval occurred and make sure that we somewhere reference props.

35
00:02:23,980 --> 00:02:29,980
Children inside there if we don't reference props children then the child or the child children that

36
00:02:29,980 --> 00:02:33,560
we passed to it from the parent are never going to show up inside of it.

37
00:02:34,340 --> 00:02:34,670
All right.

38
00:02:34,670 --> 00:02:38,720
So I think you get the idea now let's take a quick pause right here in the next video.

39
00:02:38,750 --> 00:02:42,540
I'm going to show you a one or two quick exercises to go through.

40
00:02:42,590 --> 00:02:44,820
So quick pause and I'll see you in just a minute.