In our last two examples, we put together input elements that had on change callback functions.
In both cases, these callback functions were written in line.
In other words, we defined the function right here as opposed to writing out the function separately
as we did with UNCLICK.
So it turns out that if we define these unchanged functions separately inside of our component, life
gets just a little bit more challenging.
So let's write out a very quick component just to kind of explore this idea of defining an on change
callback where we define on change itself as a separate function rather than making this change inside
of our user search file.
I'm going to instead create a new component inside of my SIRC directory.
I'm going to make a new folder called Events.
And then inside there, I'm going to make a new file called Event Component, because I don't have a
greater name than that in this case.
So even component is going to be essentially just a very simple component that we're going to use just
to explore events, it's not really going to do anything persay, and that's why we've got a very boring
name for it inside that file.
I'm going to declare a new component of event component.
I'm going to annotated Stip as React F.C..
I'll make sure I export that thing at the bottom.
And then inside the company itself, I'm going to place a div.
That complaint that contains an input element with only on change defined.
I'm then going to add in a very similar callback for change as what we had in the previous two examples.
It's going to receive some kind of event object.
They'll abbreviate simply as E and then do a console log of E like so.
Let's save this and test this thing out very quickly inside of our browser, back inside of our main
index file at the very top, I'm going to delete our user search import and replace it with event component.
From events event component, and then we'll show that component on the screen.
All right, quick, safe, quick refresh, and as soon as we type inside of here, we very clearly see
our event concealed.
Without a doubt, everything is working as expected.
So let's now go back over to our Ed and we're going to make a very small change to our event component.
As I mentioned, all I really want to do is not define this callback function in line.
Instead, I want to define it separately inside my components.
So I'm going to put in a const.
Unchanged.
We are once again going to provide some kind of event object as the argument, I'm going to abbreviate
that as e I'll do a console log of E inside of here and then to the on change prop.
I'm going to replace that with the reference to our on change function.
And then right away we see an error message around event.
So says in this case, Parameter E has in any type remember type script in general using the any type.
Generally we want to avoid that if we possibly can.
But my real question here is, why are we now seeing this error here?
But we didn't see it with this other implementation just a moment ago.
So that's the big question.
We're going to answer that question in the next video and then figure out how to get this error message
to go away.