1
00:00:02,210 --> 00:00:09,050
I created the separate component, a) of course to practice creating your own components but b) also because

2
00:00:09,050 --> 00:00:14,290
it really is the core philosophy of React to split your app into smaller pieces.

3
00:00:14,300 --> 00:00:17,490
Of course it's up to you how small you want to split it,

4
00:00:17,660 --> 00:00:22,940
every list item for example could also be its own component and there would be nothing wrong with that.

5
00:00:23,030 --> 00:00:29,440
The idea simply is to have small, manageable code files and later once we add more logic to the app so

6
00:00:29,440 --> 00:00:35,060
that we can also interact with it and we changed the number of goals for example upon a button

7
00:00:35,060 --> 00:00:36,380
click and so on,

8
00:00:36,380 --> 00:00:41,630
we of course want to be able to manage a lot of the logic in the goal list component and not in other

9
00:00:41,630 --> 00:00:42,370
components.

10
00:00:42,380 --> 00:00:49,490
So really splitting it into components has the idea of separating concerns, of keeping your files small,

11
00:00:49,490 --> 00:00:55,910
focused and manageable which, if you're working in bigger projects, is a huge win because it makes it

12
00:00:55,910 --> 00:00:59,710
much easier to manage and work in such bigger projects.

13
00:00:59,990 --> 00:01:03,890
Now thus far, everything in our app is hardcoded though,

14
00:01:04,310 --> 00:01:13,370
now a more realistic would be that lets say our goal list is managed here in app.js as data and we

15
00:01:13,370 --> 00:01:20,630
want to render the GoalList.html items or jsx items based on that data.

16
00:01:20,630 --> 00:01:27,110
Now I'll manage it here in app.js simply because later I will add another component here that helps

17
00:01:27,110 --> 00:01:28,430
us create new goals

18
00:01:28,520 --> 00:01:34,790
but for now, let's just add a normal constant here to this functional component because it is a normal

19
00:01:34,790 --> 00:01:35,920
Javascript function,

20
00:01:35,960 --> 00:01:43,150
of course you can do more than just return jsx and this constant here will have my course goals,

21
00:01:43,190 --> 00:01:49,400
you can name it however you want and this will be an array and in this array, each goal can be a Javascript

22
00:01:49,430 --> 00:01:54,980
object, created here with the object literal notation, of course you could also create your own class

23
00:01:55,070 --> 00:02:00,020
or constructor function and instantiate that to create such an object.

24
00:02:00,020 --> 00:02:01,550
Now lets say every goal has an ID,

25
00:02:02,630 --> 00:02:10,060
cg1 for course goal one and then has some text let's say and the text here is simply the text

26
00:02:10,060 --> 00:02:11,410
I have hardcoded here,

27
00:02:11,410 --> 00:02:12,920
finish the course.

28
00:02:12,940 --> 00:02:13,140
So I'll

29
00:02:13,150 --> 00:02:20,230
copy that and add this here and I'll split this across multiple lines to make it easier to read because I'll

30
00:02:20,230 --> 00:02:21,790
not just have one goal but three.

31
00:02:22,000 --> 00:02:25,730
So the IDs are cg2 and cg3 let's say

32
00:02:25,900 --> 00:02:34,490
and now I will just copy all that text here into my objects here in app.js,

33
00:02:34,770 --> 00:02:43,370
also that last text like this and there I can now also get rid of that ampersand thing here, we don't

34
00:02:43,370 --> 00:02:48,150
need that here, we can output the text like this and React will render it properly.

35
00:02:48,410 --> 00:02:54,050
So now we have the course goals array and my idea now is that in the goal list component, these goals,

36
00:02:54,080 --> 00:02:56,900
that data here should in the end be output,

37
00:02:56,900 --> 00:03:02,240
so it should be output dynamically in this component, in the goal list component instead of being hardcoded.

38
00:03:02,480 --> 00:03:04,190
So we can remove this code here,

39
00:03:04,190 --> 00:03:06,350
now that leaves us with two problems;

40
00:03:06,350 --> 00:03:11,050
number one, how can we output a list of data dynamically in jsx

41
00:03:11,270 --> 00:03:16,490
but more important than that at the moment, how can we get that list of data which is defined in the

42
00:03:16,490 --> 00:03:19,460
app component into the goal list component?

43
00:03:19,460 --> 00:03:20,720
Well let's focus on that first

44
00:03:20,720 --> 00:03:23,740
because without that, we can't focus on the other problem.

45
00:03:24,170 --> 00:03:32,900
We can pass data from component to component with a concept called props, short for properties. We can

46
00:03:32,900 --> 00:03:34,130
define our own,

47
00:03:34,130 --> 00:03:39,800
you could say attributes which are these props on our own components.

48
00:03:40,250 --> 00:03:46,080
So for example here on goal list, we could say we have an items attribute or a goals attribute,

49
00:03:46,130 --> 00:03:47,580
totally up to you,

50
00:03:47,630 --> 00:03:53,370
I'll go with goals here and that goals attribute or prop is the common term,

51
00:03:53,370 --> 00:03:58,150
so this goals prop, then passes data to that component.

52
00:03:58,350 --> 00:03:58,910
Now for that,

53
00:03:58,950 --> 00:04:03,720
I don't use a string here which I want to pass down but instead, I want to pass down my Javascript data

54
00:04:03,720 --> 00:04:04,220
structure,

55
00:04:04,230 --> 00:04:10,830
the array here and for that here actually, we use another special syntax in jsx, we use single opening

56
00:04:10,830 --> 00:04:12,670
and closing curly braces.

57
00:04:12,780 --> 00:04:16,010
Looks like we're creating a Javascript object here but we are not,

58
00:04:16,080 --> 00:04:19,460
if you do this inside of jsx which I am doing here,

59
00:04:19,500 --> 00:04:28,980
that's jsx, then this means you want to merge your jsx code with some Javascript expression in the

60
00:04:28,980 --> 00:04:29,460
end

61
00:04:29,460 --> 00:04:33,040
and here we can point at course goals. That is a valid Javascript expression,

62
00:04:33,060 --> 00:04:40,040
we're just pointing at a constant and what this in the end means is that React will pass course goals here,

63
00:04:40,170 --> 00:04:44,850
the value stored in this constant, in this case this array, into this place of jsx,

64
00:04:44,850 --> 00:04:54,040
in this case into this prop therefore. So goals will be a prop that holds a reference to this array now.

65
00:04:54,110 --> 00:04:58,600
Now inside of goal list, we can now receive that goals prop,

66
00:04:58,770 --> 00:05:02,370
so let's go to goal list and see how that works. In goal list,

67
00:05:02,370 --> 00:05:03,560
we have a function right,

68
00:05:03,600 --> 00:05:05,600
a functional component,

69
00:05:05,610 --> 00:05:08,990
now this function right now doesn't get any parameters,

70
00:05:09,090 --> 00:05:10,110
we can change this,

71
00:05:10,170 --> 00:05:17,220
we can receive a props parameter here. Every function that is used as a React component, which means

72
00:05:17,220 --> 00:05:22,540
it returns jsx, also receives props.

73
00:05:22,640 --> 00:05:29,960
This is an object passed to your React functional component automatically by React and it's an object that

74
00:05:29,960 --> 00:05:34,100
bundles all the props you passed to the component,

75
00:05:34,190 --> 00:05:37,360
so in our case goals is the single prop we have,

76
00:05:37,400 --> 00:05:44,390
so here we will have an object which has a property with the name of goals that holds the value passed

77
00:05:44,420 --> 00:05:47,340
to that prop. So in other words,

78
00:05:47,470 --> 00:05:54,430
here I could console log props.goals, .goals because I named my prop goals here.

79
00:05:54,430 --> 00:06:00,580
If you chose a different name here, which is perfectly fine, you have to use the different name here.

80
00:06:00,580 --> 00:06:06,460
Now if we save that, we won't see our goals anymore at the moment but if we open the developer tools, we

81
00:06:06,460 --> 00:06:12,010
see the array being logged here and that log is coming from goal list line 6 as you see which of course

82
00:06:12,010 --> 00:06:19,810
is this log here and there, we see our goals data, which means yes it arrives successfully inside of

83
00:06:19,810 --> 00:06:21,540
the goal list component.

84
00:06:21,640 --> 00:06:28,780
The concept of props is a super important concept in React because this is what allows you to pass data

85
00:06:28,780 --> 00:06:34,540
from component a, the app component to component b, the goal list component

86
00:06:34,540 --> 00:06:35,680
in this case.

87
00:06:35,830 --> 00:06:42,790
Now let's have a look at how we can output a list of data dynamically in jsx because here we got

88
00:06:42,790 --> 00:06:49,360
a list of goals, an array of goals and we want to output this as list items here in our unordered list.