‫It's a red flag.
‫So in this section, we're going to add some functionality to our user input.
‫If a user starts at type something, we want to react to the user type.
‫Right.
‫So I'm going to define a new method at the top of the class.
‫And I'm going to call this on input change like so.
‫So now I want to make sure that this method right here gets called.
‫Anytime someone changes attacks inside of our end.
‫So in order to make sure that we're going to create an event handler called on change right here, then
‫I'll pass it.
‫A reference to the on input change method that we just created.
‫And I'll say this dot on input change.
‫And I want to highlight one point here, when we pass a method to a props like this called on input
‫change.
‫We do not put a set of parentheses at the end of it.
‫If you were to put a set of parentheses on it, because I know what you're thinking, it means that
‫on input change is going to be automatically called whenever a component is rendered.
‫So we don't want to call on input change when our component is rendered.
‫You follow instead.
‫We want to call this function at some point in time in the future.
‫So in other words, rather than calling this function with a set of parentheses, we're going to leave
‫the parentheses and we're going to pass a reference to this function, to the input element so that
‫the input can call that function at some point in time.
‫All right, so now what that means is anytime that someone types in something into the input, our callback
‫is going to be invoked.
‫And then this callback will be run with one argument being passed to it automatically.
‫And we usually refer to that object as the event object.
‫So this is pretty much normal JavaScript objects that will contain a bunch of information about the
‫event that has just occurred in this case, the user type something.
‫All right.
‫Now, there's usually just one property inside of this entire object that we care about, and that is
‫the event dot target, dot value property.
‫So this right here will contain the tags that the user just added to our input.
‫So let's try to console log that and see what we get.
‫All right.
‫So I'll save this and then flip back over.
‫And as I add text, you'll see that in my console over here.
‫Whatever it takes, I enter, gets console logged out.
‫If I delete the text inside my input, the console shows nothing.
‫So pretty clearly, anytime that we type into the input and then the on input change method is going
‫to be called automatically.
‫And then we will be given whatever is typed into that input.
‫Now, I'm sure a couple of quick questions have brewed up here, so let me see if I can address them
‫first off.
‫You will indeed notice that we passed this callback function to a probs on the input called on change.
‫It's a very special property name and different events are going to be wired to different property names
‫in this case.
‫We want to get a call back when we want to change this text input.
‫So we use the property name on change.
‫There are several other property names for wiring up callbacks or event handlers like on submit or oncolytic,
‫of course.
‫We might have probably seen those event handlers at some point in time.
‫But the last thing that I want to mention about event handlers here is the name of the method that I
‫put together that you see right here is indeed a community convention.
‫So usually it's going to always be on.
‫And then the name, the element that we are assigning to this call back in this case, an input.
‫And finally, the event that we are watching for, which is now the change event.
‫So it's simply on input change.
‫And anyone who reads this is going to understand when this function gets called, it gets called on
‫input being changed.
‫That makes sense, right?
‫Cool.
‫Now, let me tell you, too, that in some cases you may see a little variation on this like handle
‫input change, which means this is a function that is responsible for handling the input being changed.
‫Personally, I like to use the on, and I think that it's slightly more popular, but to me it's more
‫clear.
‫But actually the name of the callback does not really make too much of a difference.
‫We can actually call it saying whatever we want, as long as we're going to change this one with the
‫same name.
‫I'm just telling you, with the community conventions are so that, you know, nobody calls you out.
‫But this right here must be on change.
‫If it's not, our function will not be called at anytime.
‫All right.
‫So that is how to handle event handlers.
‫So now we've got some value coming back from our user.
‫Why do we have a break right here?
‫And we will continue what to do with it in the next section.
‫See you there.