1
00:00:02,270 --> 00:00:07,990
So now we want to get our entered text here from the new to do component to the app component.

2
00:00:08,000 --> 00:00:09,710
Why to the app component.

3
00:00:09,710 --> 00:00:14,990
Because that is our component that has a direct link to both the new to do as well as the To Do List

4
00:00:14,990 --> 00:00:16,380
component.

5
00:00:16,400 --> 00:00:24,560
So here I want to add a new function and I'll name it to do ad handler.

6
00:00:24,570 --> 00:00:25,380
The name is up to you.

7
00:00:25,380 --> 00:00:30,360
I'd just like to use that convention of having handler at the end if it's a function that triggers upon

8
00:00:30,360 --> 00:00:31,590
an event.

9
00:00:31,590 --> 00:00:35,800
And in here I expect to get the text as a string.

10
00:00:35,850 --> 00:00:40,770
It's our function so we can expect this and then want to add this as a to do here.

11
00:00:40,770 --> 00:00:45,230
Now of course since you know react you know updating disarray alone won't do the trick.

12
00:00:45,240 --> 00:00:50,370
This won't re rendered its component so we'll have to use some state management here to make this work

13
00:00:50,730 --> 00:00:51,630
before we do that.

14
00:00:51,630 --> 00:00:54,700
However let's make sure that we at least get the value to this function.

15
00:00:54,810 --> 00:01:01,570
So let's lock the text here and then we can focus on its state management part as a second step to get

16
00:01:01,570 --> 00:01:02,010
that here.

17
00:01:02,010 --> 00:01:09,030
We need to make sure that this to do add handler function can be called from inside the new to do component

18
00:01:09,060 --> 00:01:13,110
because that is where we do at the to do in the end.

19
00:01:13,120 --> 00:01:17,920
Now how do we make this function here callable from inside this component.

20
00:01:17,920 --> 00:01:21,840
We pass a pointer at this function to that component.

21
00:01:22,360 --> 00:01:25,670
So here we could add a prop which we name on ad to do.

22
00:01:25,780 --> 00:01:27,370
And you can name it however you want.

23
00:01:27,370 --> 00:01:33,220
I just name it like this because this basically will happen upon any event and event which we control

24
00:01:33,220 --> 00:01:34,730
of course but still.

25
00:01:34,810 --> 00:01:37,980
And here I want to forward to do ad handler.

26
00:01:38,080 --> 00:01:40,660
So I pass a pointer at this function.

27
00:01:40,660 --> 00:01:42,140
I'm not executing it here.

28
00:01:42,190 --> 00:01:50,410
I just pass a pointer to dysfunction into on ad to do so that instead of new to do on props which we

29
00:01:50,410 --> 00:01:58,060
can get here we can call this so that we can call props on ad to do here and forward the entered text.

30
00:01:58,060 --> 00:01:59,400
That's the idea.

31
00:01:59,650 --> 00:02:04,930
But of course typescript doesn't like this because it doesn't know that there will be on ad to do prop

32
00:02:04,990 --> 00:02:06,210
on our props here.

33
00:02:06,280 --> 00:02:08,250
And how is such a prop would look like.

34
00:02:08,290 --> 00:02:14,410
So just like a To Do list we have to set up a interface or simply a type definition of our props.

35
00:02:14,590 --> 00:02:19,090
So let's go to new to do and maybe again add a interface.

36
00:02:19,090 --> 00:02:23,120
You could also add a type of course and I will do that here to mix things up.

37
00:02:23,200 --> 00:02:27,620
I typically would always go for interface but using a type is also fine.

38
00:02:27,700 --> 00:02:34,660
So to use a type here we can name it new to do props and the type is an object type where I want to

39
00:02:34,660 --> 00:02:42,400
have on add to do prop and design turn will be a function type it will point at a function you define

40
00:02:42,400 --> 00:02:47,440
function types like this as you learned it will be a function that doesn't return anything but which

41
00:02:47,440 --> 00:02:51,460
expects one parameter and that will be the text the user entered.

42
00:02:51,460 --> 00:02:58,950
So the two do text which is of type String that's what this function expects.

43
00:02:58,970 --> 00:03:04,310
Now let's set this on this generic type here and point at Newt to do props.

44
00:03:04,550 --> 00:03:10,780
And with that we can call on ad to do and pass in the string and if it would try to pass in a number

45
00:03:10,780 --> 00:03:15,860
you for example we of course would get an error because we clearly defined that the argument has to

46
00:03:15,860 --> 00:03:17,320
be a string up there.

47
00:03:17,660 --> 00:03:28,120
So let's revert this with that if we enter a new goal again finish it in one month we again see our

48
00:03:28,120 --> 00:03:33,760
log here but now it's coming from the app component as you can clearly tell because we add a does log

49
00:03:33,760 --> 00:03:34,190
here.

50
00:03:34,210 --> 00:03:39,790
So does communication between the new to do component anti app component here works.

51
00:03:39,790 --> 00:03:42,770
And with that let's implement some state management here.

52
00:03:42,850 --> 00:03:48,160
And again this is all something you can try on your own first if you want to to make sure that you render

53
00:03:48,160 --> 00:03:54,450
to dos in state so that whenever we update our to do is we also re rendered this component.

54
00:03:54,520 --> 00:03:56,110
Let's do that in the next lecture.