1
00:00:00,870 --> 00:00:05,700
In our last two examples, we put together input elements that had on change callback functions.

2
00:00:06,030 --> 00:00:09,000
In both cases, these callback functions were written in line.

3
00:00:09,300 --> 00:00:13,740
In other words, we defined the function right here as opposed to writing out the function separately

4
00:00:13,740 --> 00:00:15,060
as we did with UNCLICK.

5
00:00:15,630 --> 00:00:21,210
So it turns out that if we define these unchanged functions separately inside of our component, life

6
00:00:21,210 --> 00:00:22,890
gets just a little bit more challenging.

7
00:00:23,370 --> 00:00:28,230
So let's write out a very quick component just to kind of explore this idea of defining an on change

8
00:00:28,230 --> 00:00:34,590
callback where we define on change itself as a separate function rather than making this change inside

9
00:00:34,590 --> 00:00:35,970
of our user search file.

10
00:00:36,180 --> 00:00:39,810
I'm going to instead create a new component inside of my SIRC directory.

11
00:00:39,850 --> 00:00:42,120
I'm going to make a new folder called Events.

12
00:00:42,540 --> 00:00:48,330
And then inside there, I'm going to make a new file called Event Component, because I don't have a

13
00:00:48,330 --> 00:00:50,610
greater name than that in this case.

14
00:00:51,480 --> 00:00:55,730
So even component is going to be essentially just a very simple component that we're going to use just

15
00:00:55,740 --> 00:01:00,000
to explore events, it's not really going to do anything persay, and that's why we've got a very boring

16
00:01:00,000 --> 00:01:02,250
name for it inside that file.

17
00:01:03,600 --> 00:01:06,750
I'm going to declare a new component of event component.

18
00:01:07,990 --> 00:01:10,900
I'm going to annotated Stip as React F.C..

19
00:01:12,890 --> 00:01:15,110
I'll make sure I export that thing at the bottom.

20
00:01:17,480 --> 00:01:20,570
And then inside the company itself, I'm going to place a div.

21
00:01:22,490 --> 00:01:27,500
That complaint that contains an input element with only on change defined.

22
00:01:28,700 --> 00:01:33,830
I'm then going to add in a very similar callback for change as what we had in the previous two examples.

23
00:01:34,240 --> 00:01:36,030
It's going to receive some kind of event object.

24
00:01:36,030 --> 00:01:41,270
They'll abbreviate simply as E and then do a console log of E like so.

25
00:01:42,760 --> 00:01:47,860
Let's save this and test this thing out very quickly inside of our browser, back inside of our main

26
00:01:47,860 --> 00:01:55,510
index file at the very top, I'm going to delete our user search import and replace it with event component.

27
00:01:57,050 --> 00:02:02,050
From events event component, and then we'll show that component on the screen.

28
00:02:04,890 --> 00:02:10,259
All right, quick, safe, quick refresh, and as soon as we type inside of here, we very clearly see

29
00:02:10,259 --> 00:02:11,550
our event concealed.

30
00:02:11,730 --> 00:02:14,280
Without a doubt, everything is working as expected.

31
00:02:15,120 --> 00:02:19,530
So let's now go back over to our Ed and we're going to make a very small change to our event component.

32
00:02:19,950 --> 00:02:25,200
As I mentioned, all I really want to do is not define this callback function in line.

33
00:02:25,390 --> 00:02:28,260
Instead, I want to define it separately inside my components.

34
00:02:28,920 --> 00:02:30,510
So I'm going to put in a const.

35
00:02:31,450 --> 00:02:32,220
Unchanged.

36
00:02:34,770 --> 00:02:40,530
We are once again going to provide some kind of event object as the argument, I'm going to abbreviate

37
00:02:40,530 --> 00:02:46,140
that as e I'll do a console log of E inside of here and then to the on change prop.

38
00:02:46,140 --> 00:02:49,500
I'm going to replace that with the reference to our on change function.

39
00:02:50,190 --> 00:02:53,280
And then right away we see an error message around event.

40
00:02:54,000 --> 00:03:00,900
So says in this case, Parameter E has in any type remember type script in general using the any type.

41
00:03:00,900 --> 00:03:03,660
Generally we want to avoid that if we possibly can.

42
00:03:04,300 --> 00:03:07,370
But my real question here is, why are we now seeing this error here?

43
00:03:07,680 --> 00:03:11,160
But we didn't see it with this other implementation just a moment ago.

44
00:03:11,790 --> 00:03:12,900
So that's the big question.

45
00:03:13,080 --> 00:03:16,680
We're going to answer that question in the next video and then figure out how to get this error message

46
00:03:16,680 --> 00:03:17,460
to go away.