1
00:00:02,210 --> 00:00:07,140
You can also pass data back and you still do this with props.

2
00:00:07,250 --> 00:00:15,320
The idea just is that instead of having props that pass in data, like a string or an array or an object

3
00:00:15,620 --> 00:00:22,430
to the lower level, to the child component as it's also called, you pass a callback function from the

4
00:00:22,430 --> 00:00:24,550
parent component to the child component,

5
00:00:24,590 --> 00:00:27,670
so no array or anything like that but a callback function.

6
00:00:27,680 --> 00:00:34,550
So here in the app component, we could define a new function, add new goal handler, the name is totally

7
00:00:34,550 --> 00:00:43,100
up to you and I name it handler because it also will kind of be triggered upon an event and here I expect

8
00:00:43,100 --> 00:00:50,640
to get the new goal and then here, I can reach out to course goals

9
00:00:50,650 --> 00:00:58,940
and for example push the new goal into this array and thereafter, console log course goals.

10
00:00:58,950 --> 00:01:06,340
Now we have this function and now we can pass it to new goal via props. So there we could add a prop,

11
00:01:06,730 --> 00:01:08,650
on add goal,

12
00:01:08,650 --> 00:01:15,490
this is now not an event listener React defines, for all the built-in HTML elements, we have

13
00:01:15,670 --> 00:01:22,270
built-in event listeners, like for example in the new goal component, on the form, we had on submit, on

14
00:01:22,270 --> 00:01:27,250
a button we have on click, on input we also have on click for example because you can also handle click

15
00:01:27,250 --> 00:01:33,010
events on inputs, you can handle those on any HTML element. Now in the end here I call this an event

16
00:01:33,010 --> 00:01:37,210
handler but what it actually is is just a prop.

17
00:01:37,210 --> 00:01:42,730
Technically there is no difference between class name where I pass in a string and on submit where I

18
00:01:42,730 --> 00:01:45,350
pass in a pointer to a function.

19
00:01:45,670 --> 00:01:51,940
So in the end, this is just a prop of the form element which React offers to you.

20
00:01:51,970 --> 00:01:59,230
So here in app.js, we can also pass a prop here, on new goal, which holds a pointer to a function. I

21
00:01:59,230 --> 00:02:03,240
just name this prop like this, not because I have to,

22
00:02:03,280 --> 00:02:12,460
I could name it add goal or this here but it's a convention to name props which the end pass functions

23
00:02:12,460 --> 00:02:19,300
to lower level components like event handlers because the functions you pass down to components in the

24
00:02:19,300 --> 00:02:23,230
end will be called by these components upon certain events,

25
00:02:23,230 --> 00:02:28,330
that is how it typically works and you will see that the more React applications you build.

26
00:02:28,330 --> 00:02:35,350
So therefore, I follow this convention and name this on add goal and passed my add new goal handler

27
00:02:35,680 --> 00:02:43,730
to the new goal component. So I pass a pointer, not the execution but just a pointer to its function, to

28
00:02:43,720 --> 00:02:52,600
new goal on this on add goal prop. Now that means that inside of new goal, I can now accept props here,

29
00:02:52,600 --> 00:02:58,330
I can accept this props parameter, I always get it even if I don't get any props but if I don't get any

30
00:02:58,330 --> 00:03:05,080
props there isn't much sense in explicitly writing it out here but now I need a prop which I'm getting

31
00:03:05,080 --> 00:03:12,160
on new goal and that is that on add goal prop I defined here. I want to call that function I receive on

32
00:03:12,160 --> 00:03:16,300
that prop here inside of my add goal handler in new goal.

33
00:03:16,300 --> 00:03:24,190
So instead of logging the new goal, I can now call props on add goal here, on add goal because that's the

34
00:03:24,190 --> 00:03:31,150
name I chose here and on add goal passes a pointer at a function to the component. So inside of the new

35
00:03:31,150 --> 00:03:38,080
goal component, I know I can execute on add goal because it holds a pointer to a function, so I now execute

36
00:03:38,080 --> 00:03:44,970
that function it pointed to and I can pass my new goal as an argument to on add goal because indeed in

37
00:03:44,980 --> 00:03:51,850
the function I passed to on add goal, I expect to get a new goal as an argument, as a parameter.

38
00:03:51,950 --> 00:03:59,310
So now if we save everything, we should see that if I click add goal, we're outputting something from app.js

39
00:03:59,310 --> 00:04:06,270
line 16, which is this log here and we're outputting our new course goals array, which are our

40
00:04:06,390 --> 00:04:08,700
old goals and the new goal.

41
00:04:08,850 --> 00:04:16,050
So parsing the goal from the lower level, from the child component, the new goal component to the parent

42
00:04:16,050 --> 00:04:23,520
component, the app component in this case works and it works with props, we just use props to parse a

43
00:04:23,520 --> 00:04:29,370
function that is then called by the child components instead of passing data directly from parent to

44
00:04:29,370 --> 00:04:30,080
child,

45
00:04:30,090 --> 00:04:36,240
this gives us a way to communicate back from the child to the parent with help of such a function.