1
00:00:00,690 --> 00:00:06,120
In the last section we put together our first instance of component nesting so we now have several copies

2
00:00:06,150 --> 00:00:11,160
of the comment detail component showing up inside the app and we were able to confirm that inside of

3
00:00:11,160 --> 00:00:12,760
our actual application over here.

4
00:00:12,990 --> 00:00:17,910
Now as I've said many times the current issue with our application is that every single comment detail

5
00:00:18,090 --> 00:00:21,350
has the same exact author's name time and content.

6
00:00:21,510 --> 00:00:24,490
So in this video we're going to figure out how to fix that.

7
00:00:24,540 --> 00:00:28,800
Now before I tell you exactly how we're going to fix it I first want to show you a quick diagram that

8
00:00:28,800 --> 00:00:30,790
you're going to see many times throughout this course.

9
00:00:30,840 --> 00:00:36,360
And in a lot of blog posts in articles around re-act this diagram right here is what we might refer

10
00:00:36,360 --> 00:00:38,450
to as our component hierarchy.

11
00:00:38,520 --> 00:00:42,720
It's a diagram that tells us the different components that are currently being displayed inside of our

12
00:00:42,720 --> 00:00:46,530
application and the relationship between those different components.

13
00:00:46,530 --> 00:00:52,110
So in this diagram we would say that we have a single instance of the app component and then underneath

14
00:00:52,110 --> 00:00:59,370
it we have three instances of the comment detail because the app is showing the common detail or because

15
00:00:59,370 --> 00:01:04,800
the common details nested inside the app we would refer to the app as a parent component.

16
00:01:05,040 --> 00:01:11,730
And these comment details as child components were going to use this term child components or children

17
00:01:12,180 --> 00:01:15,960
many times throughout this course and some of the later things that were even going to do in the section

18
00:01:16,170 --> 00:01:19,980
are going to depend heavily upon this idea of child components.

19
00:01:20,220 --> 00:01:26,010
OK so now that we understand this diagram right here I want to tell you about the prop's system which

20
00:01:26,010 --> 00:01:29,760
we're going to use to customize the comment details when they show up on the screen.

21
00:01:29,970 --> 00:01:33,900
We're going to come back to a form of this diagram in just a second to help you understand how props

22
00:01:33,900 --> 00:01:34,820
really work.

23
00:01:35,180 --> 00:01:35,500
OK.

24
00:01:35,550 --> 00:01:36,290
Here we go.

25
00:01:36,660 --> 00:01:44,130
So the props system in react is a system for passing data from a parent component to a child or a nested

26
00:01:44,130 --> 00:01:45,300
component.

27
00:01:45,390 --> 00:01:51,450
The entire goal of the prop system is to somehow communicate data from the parent down to a child with

28
00:01:51,450 --> 00:01:56,310
the ultimate goal of customizing the child and making sure that the content that it displays on the

29
00:01:56,310 --> 00:02:01,650
screen is somewhat different or to make sure that the behavior of the component is different when the

30
00:02:01,680 --> 00:02:03,530
user interacts with it.

31
00:02:03,540 --> 00:02:05,640
Remember the overall goal of components.

32
00:02:05,670 --> 00:02:11,120
Their goal is to either show some content to the user or react to user interaction.

33
00:02:11,160 --> 00:02:14,860
So the whole purpose of props is to customize those two things.

34
00:02:15,000 --> 00:02:19,100
Either customize how their component looks or how a user interacts with it.

35
00:02:20,740 --> 00:02:20,970
All right.

36
00:02:20,980 --> 00:02:23,790
So similar diagram over here too we were just looking at before.

37
00:02:23,830 --> 00:02:30,100
Here's the general idea with props are app component is going to show instances of the commet detail

38
00:02:30,560 --> 00:02:33,180
when the app shows those components at the same time.

39
00:02:33,190 --> 00:02:38,850
It's going to pass in a little bit of configuration to each of those different common components.

40
00:02:38,950 --> 00:02:45,340
This little configuration each these would refer to as props are going to supposedly tell the comet

41
00:02:45,340 --> 00:02:50,500
detail to maybe show a name or an author of Alecs of Shane or Sam.

42
00:02:50,500 --> 00:02:57,130
We can also use the same props system to customize the time that each common detail is showing and customize

43
00:02:57,130 --> 00:02:58,990
the content as well.

44
00:02:59,020 --> 00:03:04,450
There's no limit to the amount of information that we can share over this prop system so we can pass

45
00:03:04,570 --> 00:03:06,720
one piece of configuration like hey play.

46
00:03:06,730 --> 00:03:08,070
Please use the name of Alex.

47
00:03:08,140 --> 00:03:11,460
Or we could pass down 20 or 30 or 40 or 50.

48
00:03:11,500 --> 00:03:16,210
Now in practice there usually tends to be an effective limit on the amount of information that we want

49
00:03:16,210 --> 00:03:17,960
to pass from a parent to a child's.

50
00:03:18,070 --> 00:03:23,620
But we'll learn more about that over time as we get a better handle on some best practices around props

51
00:03:23,770 --> 00:03:26,660
in handling data inside of re-act application.

52
00:03:26,660 --> 00:03:26,880
OK.

53
00:03:26,900 --> 00:03:27,960
So that's the Propp system.

54
00:03:27,970 --> 00:03:34,450
Remember it's all about having a parent customize how the child looks or behaves.

55
00:03:34,450 --> 00:03:35,550
Let's take a quick pause here.

56
00:03:35,590 --> 00:03:40,450
When we come back the next section we'll learn more about the syntax around passing props from a parent

57
00:03:40,450 --> 00:03:41,290
down to a child.