1
00:00:00,330 --> 00:00:06,330
And while we're still on the topic of props, I also would like to talk about the special prop called

2
00:00:06,420 --> 00:00:06,980
Children.

3
00:00:07,410 --> 00:00:12,720
So this is going to be the case where please don't name this mama.

4
00:00:13,560 --> 00:00:18,510
OK, this is not the case where, as usual, I said, yeah, you can name it whatever you'd want.

5
00:00:18,540 --> 00:00:20,790
Shake and bake, Uncle Bobby or whatever.

6
00:00:21,040 --> 00:00:24,360
In this case, the name has to match.

7
00:00:24,600 --> 00:00:25,190
Exactly.

8
00:00:25,530 --> 00:00:26,760
Now, what am I talking about?

9
00:00:26,820 --> 00:00:36,540
You see, the children Propp is everything that we render in between the opening and closing time of

10
00:00:36,900 --> 00:00:37,890
the component.

11
00:00:38,250 --> 00:00:43,800
So for example, for the first or second book, you can pick whichever you like.

12
00:00:44,190 --> 00:00:52,590
I would like to add the description, but again, the Gotcher over here is that only one of them will

13
00:00:52,590 --> 00:00:58,350
have that description, not all of them, because if we want all of them, of course, we just need

14
00:00:58,350 --> 00:01:05,250
to add that property in the object that I'm looking for, the prop, I set the value and I'm good to

15
00:01:05,250 --> 00:01:06,040
go now.

16
00:01:06,090 --> 00:01:10,980
This is going to be the case where only one of them will have that description.

17
00:01:11,220 --> 00:01:12,450
So I'm going to go with the first one.

18
00:01:12,450 --> 00:01:14,560
But as always, you can pick whichever you would like.

19
00:01:14,910 --> 00:01:20,550
So, of course, first I would need to change this around where I'm not going to be self-closing because

20
00:01:20,550 --> 00:01:22,530
children will be here.

21
00:01:23,520 --> 00:01:30,660
In between my tax and I'm just going to go with a paragraph and I'm going to use a law, I'm so in visual

22
00:01:30,660 --> 00:01:34,800
studio code, you just need to type Lorem on how many words you would like.

23
00:01:34,800 --> 00:01:39,640
So case, I'm going to go with 20 now, the moment I run it.

24
00:01:39,930 --> 00:01:41,460
Notice how nothing changes.

25
00:01:42,400 --> 00:01:48,160
I don't see any difference, so the paragraph is only for the first one, but there's no difference

26
00:01:48,400 --> 00:01:54,070
on what is to show how I can access whatever I place in between.

27
00:01:54,220 --> 00:01:59,110
And keep in mind, again, you can place here the whole project doesn't matter.

28
00:01:59,140 --> 00:02:02,080
In my case, I just placed one paragraph with 20 words.

29
00:02:02,080 --> 00:02:08,290
But you can place your buttons, you can place your forms, whatever you like, placed you in between

30
00:02:08,290 --> 00:02:10,480
the opening and closing tax.

31
00:02:10,840 --> 00:02:14,640
Now, the better question right now is how can I access this?

32
00:02:15,010 --> 00:02:22,930
And the thing is, I already structured the props object where I said that I'm looking for the prop

33
00:02:23,140 --> 00:02:24,490
and the author prop.

34
00:02:24,910 --> 00:02:29,600
Now, the children prop ears on the props object.

35
00:02:29,830 --> 00:02:32,080
I can tell you right away that it is there.

36
00:02:32,410 --> 00:02:40,420
So what I could do is just write comma and then children not don't worry, I will refactor a little

37
00:02:40,420 --> 00:02:40,920
bit later.

38
00:02:41,680 --> 00:02:43,770
So essentially that way you can definitely see it.

39
00:02:44,050 --> 00:02:46,420
But for now, just look for children.

40
00:02:46,720 --> 00:02:49,090
And the name again here is important.

41
00:02:49,480 --> 00:02:56,410
And what you'll notice that since again we can access JavaScript, can just place children wherever

42
00:02:56,410 --> 00:02:57,070
I would like.

43
00:02:57,370 --> 00:03:05,970
So once I run it right now, of course everything is displayed correct because this is my paragraph.

44
00:03:06,340 --> 00:03:12,630
Now, as far as where you would want to render, it's really up to you where if I move this up, notice

45
00:03:12,820 --> 00:03:15,460
now, of course, it's going to be above the other.

46
00:03:15,730 --> 00:03:21,730
If I move this above the title and of course it's going to be above the title again, the name is very

47
00:03:21,730 --> 00:03:22,270
special.

48
00:03:22,750 --> 00:03:23,920
It is children.

49
00:03:24,400 --> 00:03:28,720
And in this case, I'd the structured right here in function parameters.

50
00:03:29,080 --> 00:03:35,050
And then of course, you also accept so we use the carburettors would go back to JavaScript and then

51
00:03:35,050 --> 00:03:36,640
we access the same name.

52
00:03:36,910 --> 00:03:44,080
And then wherever I'm going to place this in a component, it will be rendered, meaning we'll place

53
00:03:44,080 --> 00:03:51,280
it in between the opening and closing time and then where we set up the component, we can render it

54
00:03:51,430 --> 00:03:53,550
anywhere, anywhere we would want.

55
00:03:53,560 --> 00:03:56,170
Now, in my case, of course, I'm going to do this in the bottom.

56
00:03:56,410 --> 00:04:02,410
So now let me rewrite where I'm not going to structure everything and function parameters.

57
00:04:02,680 --> 00:04:04,700
Essentially, I will go back to props.

58
00:04:05,140 --> 00:04:07,300
So I'm going to go back here to the props.

59
00:04:07,750 --> 00:04:09,220
I will come on the set.

60
00:04:09,610 --> 00:04:11,770
So I'm still accessing these values.

61
00:04:12,070 --> 00:04:17,220
And of course, now I would need to go with props and the children.

62
00:04:17,290 --> 00:04:22,780
Now, the reason why I refactored a little bit, because I clearly want to show you that, of course,

63
00:04:22,780 --> 00:04:24,580
the props will be there.

64
00:04:24,850 --> 00:04:25,990
So if we go back.

65
00:04:26,910 --> 00:04:34,410
And if we inspect, take a look at the council notice again, I have to object, so my object, however,

66
00:04:34,710 --> 00:04:37,560
for a second one, it has this children.

67
00:04:38,400 --> 00:04:42,090
That's why I said the name is special or I'm sorry for the first one.

68
00:04:42,090 --> 00:04:43,290
For the first one, we have children.

69
00:04:43,680 --> 00:04:45,200
And the second one doesn't have that.

70
00:04:45,660 --> 00:04:52,680
So, of course, that's why the second one doesn't display the children and the first one does not see

71
00:04:52,680 --> 00:04:54,150
a specific thing.

72
00:04:54,420 --> 00:05:01,170
For example, if you don't like this siestas grid, meaning that both cards right now are extended,

73
00:05:01,590 --> 00:05:04,110
you can simply go back to indexers.

74
00:05:05,250 --> 00:05:11,370
There where you're setting up the grade, you can say a line items and we can just say start on what

75
00:05:11,370 --> 00:05:17,700
you'll notice right now that only the one that has the children, meaning the paragraph that I want,

76
00:05:17,700 --> 00:05:18,540
is extended.

77
00:05:18,760 --> 00:05:19,620
So that's up to you.

78
00:05:19,980 --> 00:05:26,790
If you like this type of serious matter where each card has its own height, you can keep it if you

79
00:05:26,790 --> 00:05:27,450
don't mind.

80
00:05:27,450 --> 00:05:28,360
Of course, don't add it.

81
00:05:28,380 --> 00:05:34,350
So, for example, if I come in the south and of course, notice how both of them are extended now,

82
00:05:34,350 --> 00:05:36,980
I will add a little bit of this.

83
00:05:36,990 --> 00:05:44,760
I swear I'm going to say book and then we'll just say margin top and we're going to go with I don't

84
00:05:44,760 --> 00:05:45,000
know.

85
00:05:45,880 --> 00:05:53,770
Point five or something like that, not much in there, and of course, we know how we can work with

86
00:05:53,770 --> 00:06:02,590
a children problem and react where a gun is going to be content in between the opening and closing.

87
00:06:02,710 --> 00:06:03,910
Tag them.

88
00:06:03,910 --> 00:06:05,290
The name is special.

89
00:06:05,660 --> 00:06:07,480
We need to go with children.

90
00:06:07,780 --> 00:06:14,320
So either you the structure here, function parameters or you still keep the name and then you the structure,

91
00:06:14,320 --> 00:06:15,220
rest of the properties.

92
00:06:15,320 --> 00:06:21,190
By the way, please keep in mind and still do it here as well, Marcey children.

93
00:06:21,670 --> 00:06:26,290
And then of course when I access, I also need to access children.

94
00:06:26,710 --> 00:06:29,610
I can also do it this way as well.