1
00:00:00,700 --> 00:00:06,810
In the last video we created the approval card component and then we showed it inside of our app member.

2
00:00:06,820 --> 00:00:11,730
We now want to somehow get the approval curve to show a comment detail inside of it.

3
00:00:11,830 --> 00:00:18,750
But we do not want to hard code the approval card to always 100 percent of the time show a common detail.

4
00:00:18,880 --> 00:00:22,910
If we did so we would then lose out on some re-usability around the approval curve.

5
00:00:23,020 --> 00:00:27,800
For example we couldn't reuse it to show some arbitrary text inside of there instead.

6
00:00:28,150 --> 00:00:29,350
So how are we going to do this.

7
00:00:29,350 --> 00:00:32,610
Well we're going to make use of a little feature in the prop's system.

8
00:00:32,620 --> 00:00:39,580
Again at this point we've only discussed prop's as being some property name equals and then value that

9
00:00:39,580 --> 00:00:46,840
you pass directly to a component inside of the component tag like inside that tag right there.

10
00:00:47,050 --> 00:00:52,360
But there's another way that we can communicate information into some child component.

11
00:00:52,360 --> 00:00:57,840
Let me show you how right now we have a approval card as a self-closing tag right here.

12
00:00:58,020 --> 00:01:01,520
I'm going to update this so that it is no longer a self-closing tag.

13
00:01:01,800 --> 00:01:06,690
So I'm going to delete that forward slash and then I'm going to put a closing tag on the other side

14
00:01:06,780 --> 00:01:11,170
like so now the syntax right here shouldn't look too crazy.

15
00:01:11,170 --> 00:01:14,440
It's essentially the same syntax that we use whenever we create a div.

16
00:01:14,530 --> 00:01:17,040
We have the opening tag and then the closing tag.

17
00:01:18,030 --> 00:01:23,720
So now to communicate this component down to the approval card and tell the approval card that we wanted

18
00:01:23,760 --> 00:01:28,680
to show the common detail we're going to take this closing tag right here.

19
00:01:28,820 --> 00:01:35,070
I'm going to cut it and then I'll put it on the other side of the common detail like so and then I'm

20
00:01:35,070 --> 00:01:37,760
going to indent the comment detail.

21
00:01:37,880 --> 00:01:44,790
So we are now taking this comment detail component and we are passing it as a prop down into approval

22
00:01:44,810 --> 00:01:45,380
card.

23
00:01:45,500 --> 00:01:51,590
Yes we would refer to this as a prop as well because we are providing some configuration to the approval

24
00:01:51,590 --> 00:01:54,260
card component.

25
00:01:54,390 --> 00:02:00,370
And when we pass this thing in we now have to open up our approval card component.

26
00:02:00,590 --> 00:02:06,160
Remember every function that we put together receives a first argument that we refer to as props.

27
00:02:06,560 --> 00:02:12,230
So that component that we just passed in as some configuration to this thing now exists on this prop's

28
00:02:12,230 --> 00:02:15,800
object before we make use of it at all inside this file.

29
00:02:15,800 --> 00:02:21,040
I want to very quickly console log that Propp subject just to show you exactly what happens.

30
00:02:22,080 --> 00:02:22,340
OK.

31
00:02:22,360 --> 00:02:25,360
So I got my console log there and now a flip back over to the browser.

32
00:02:27,940 --> 00:02:31,200
Senao inside of my console over here you'll see that console log.

33
00:02:31,420 --> 00:02:36,610
Notice how the application has not changed at all except for the fact that we're now missing one of

34
00:02:36,610 --> 00:02:38,340
the three comments that we had before.

35
00:02:39,280 --> 00:02:41,950
Let's take a look at the console log of that prop's object.

36
00:02:41,950 --> 00:02:44,170
You can click on that arrow to expand it.

37
00:02:44,230 --> 00:02:48,660
You'll notice that the props object now has a single property inside of it called children.

38
00:02:48,760 --> 00:02:53,410
We just ignore that underscore underscore Prato that's not related to any Riak stuff or anything like

39
00:02:53,410 --> 00:02:54,820
that that we are doing.

40
00:02:55,030 --> 00:02:58,000
So we can expand that children object right there.

41
00:02:58,000 --> 00:03:01,490
This right here is our common detail component.

42
00:03:01,540 --> 00:03:09,830
So essentially when we pass one component to another using this syntax right here the child component

43
00:03:09,860 --> 00:03:16,550
in this case comment detail is going to show up inside of the approval card on the prop's object and

44
00:03:16,550 --> 00:03:21,980
specifically on a property of the prop's object called the children property.

45
00:03:23,110 --> 00:03:29,620
So we could cancel log out just that comment detail by doing a Propst not children like so if I now

46
00:03:29,620 --> 00:03:32,700
save this our file will automatically rerun.

47
00:03:32,770 --> 00:03:33,510
You could ignore.

48
00:03:33,520 --> 00:03:35,590
You notice I have that little 403 forbidden there.

49
00:03:35,590 --> 00:03:37,860
That's just because I failed to fetch the image.

50
00:03:37,860 --> 00:03:42,950
Well you'll notice more importantly the consul log right here is now of just to react component itself.

51
00:03:43,240 --> 00:03:49,220
So now we can show that thing inside of the body of our approval card for us in particular.

52
00:03:49,240 --> 00:03:50,890
We want to replace this hard coded.

53
00:03:50,890 --> 00:03:51,900
Are you sure.

54
00:03:52,860 --> 00:03:55,620
With whatever's coming over on Propst not children.

55
00:03:55,830 --> 00:04:01,260
So because you want to reference a javascript variable here Propst children are put in my curly braces

56
00:04:02,480 --> 00:04:07,060
and say prop's not children like so and then I'm going to remove that log.

57
00:04:08,310 --> 00:04:08,620
OK.

58
00:04:08,640 --> 00:04:13,920
So I'll now save this and if I now flip back over we can see that my comment detail is now showing up

59
00:04:13,950 --> 00:04:17,450
inside of the approval card just as we intended.

60
00:04:17,810 --> 00:04:18,180
Awesome.

61
00:04:18,190 --> 00:04:18,960
So that's pretty much it.

62
00:04:18,960 --> 00:04:25,200
That is the strategy that we use when we want to make truly reusable components if we ever want to show

63
00:04:25,230 --> 00:04:31,820
some component or some custom content inside of a component then we will take the child.

64
00:04:32,100 --> 00:04:38,250
We will wrap it with a parent component and then that child component is going to show up inside of

65
00:04:38,250 --> 00:04:41,750
the child on the prop's children property.

66
00:04:41,760 --> 00:04:47,010
It's always going to show up on the Propst not children so that we can then take that Propst start children

67
00:04:47,010 --> 00:04:51,350
property and reference it from anywhere inside of our GSX.

68
00:04:51,420 --> 00:04:57,540
So if we wanted to instead show the child at say the very bottom of the card then I could cut that out

69
00:04:57,600 --> 00:05:01,840
and paste Propp start children with the curly braces down here instead.

70
00:05:02,010 --> 00:05:07,440
And now we'll see that the comment shows up down here at the very bottom of the card which looks kind

71
00:05:07,440 --> 00:05:10,900
of funky but I think you now get the idea for us in particular.

72
00:05:10,920 --> 00:05:16,390
We wanted to show it inside of the div with class name content so that it looks like that.

73
00:05:16,460 --> 00:05:17,050
Where is it.

74
00:05:17,070 --> 00:05:18,140
That right there.

75
00:05:18,510 --> 00:05:19,430
All right so that's pretty much it.

76
00:05:19,440 --> 00:05:22,510
That's how we create some reusable components.

77
00:05:22,600 --> 00:05:24,090
So now we know how to do that.

78
00:05:24,090 --> 00:05:28,530
I would really like it if we took a pause right here in between this video and the next you tried to

79
00:05:28,530 --> 00:05:34,580
take this approval card component and use it to wrap both of our other comment details as well.

80
00:05:34,610 --> 00:05:39,810
So all you do is essentially do the same thing we did right there to show an instance of comment detail

81
00:05:39,870 --> 00:05:41,870
inside of our approval card.

82
00:05:42,180 --> 00:05:45,450
So a quick pause and we'll go over the solution to this in the next video.