‫Handling events in React
‫is actually pretty straightforward
‫and so let's now learn how it's done.
‫So, as you can imagine,
‫we are not going to use the addEventListener here
‫because that is the imperative way of building UIs.
‫But here in React we use a more declarative approach.
‫So we do not manually select DOM elements,
‫and so therefore, we do also not use addEventListener.
‫Instead we use something similar
‫to the HTML inline event listener.
‫So instead in React we do something very similar
‫to the HTML inline event listener.
‫So basically we will directly listen
‫for the event right on the element where they will happen.
‫So right here on the button, for example, we can use the
‫onClick prop, and then we simply specify a function here.
‫So, the "Click" is the event name
‫and then we always prefix it with the "on".
‫And then we need to write it in camel case.
‫While in inline HTML
‫we would write it like this.
‫So like this, and then specifying a string.
‫So no camel case,
‫but this is not HTML it is JSX
‫and so it's slightly different
‫just as we learned before in the lecture
‫about the rules on JSX.
‫So, again, we will pass in here now a function
‫and that function will then be executed
‫whenever there is a click happening on this DOM element.
‫So in this case, on this button right here.
‫So, let's create a quick arrow function here.
‫And all I'm going to do now is to alert
‫something,
‫let's say "Previous", and this should already be working.
‫So if I click here now,
‫then yes, we get the alert
‫that is saying "Previous".
‫and we can do the same thing on the other button.
‫And here we say "Next".
‫And so of course then here we will get a different message.
‫And that's essentially it.
‫So this is how we handle events The React way.
‫no addEventListeners,
‫but instead we specify an event listener function
‫directly on the element using, in this case,
‫the onClick prop.
‫But it could be any other event as well,
‫So we can specify another event handler.
‫So let's use the onMouseEnter.
‫And so now here again, we need to specify a function
‫and it's really, really important to understand
‫that it is not a function call, but really a function.
‫So we cannot simply write,
‫alert,
‫"TEST", for example
‫because watch what happens now as I save.
‫So you see, immediately we got this "TEST" right here,
‫and not when a hover over the button.
‫So why is that?
‫Well, basically,
‫as soon as React initializes this component,
‫so when it first calls this app function,
‫it'll then see this code.
‫And so here we are calling alert
‫and so then, that's exactly what it does.
‫React will read this code
‫and then here it finds this function call.
‫And so it will immediately call this function.
‫But again, that's not what we want.
‫We want to basically define a callback function
‫which will be called at a later time.
‫And that later time is in this case
‫when the mouse enters this element.
‫So you see that now nothing happened,
‫but as soon as the mouse hovers here,
‫then this function is called.
‫So this function is called and, then we get our alert.
‫So again, very, very important, do not call a function here
‫but really specify a function value.
‫Somehow we got that again here,
‫but nevermind.
‫So this was just a test anyway, let's get rid of this.
‫This was just to show you that we can listen, of course,
‫to more than just a click event.
‫Now usually
‫we do not directly define the event handler function
‫right here in the onClick prop,
‫but instead we create a separate function
‫and then pass that function in here.
‫So let's do that now.
‫And, so usually we create those event handler functions
‫right here in the component.
‫So that's something new that we haven't done before,
‫but that's perfectly fine.
‫We can define any functions that we want
‫here, right inside the component body.
‫And let's call this one handlePrevious,
‫And this handle part here in the event handler function
‫is pretty standard in React development.
‫So you will see this all the time,
‫and so then you know immediately that this function
‫is an event handler function
‫that is probably being used somewhere
‫in the JSX of that component.
‫In this case, it's going to be used right here.
‫So, handlePrevious.
‫And what we want to do here, again for now,
‫is just to alert "Previous".
‫So if we click here now, that's going to work still.
‫Great. And once again, really, really important to notice
‫that here, we are just passing in the function value.
‫So we are not calling it,
‫because if we were calling it,
‫then again, we would immediately see that "Previous".
‫So React would then immediately run this code here
‫as it sees it.
‫All right.
‫But like this, we are only passing in the function.
‫Or of course, we could also do this.
‫But of course, that's very redundant.
‫So now we are back to just having a function here, right?
‫It's just a function that calls another one,
‫so that's not very effective.
‫But sometimes we will have to do something similar.
‫But for now, this is the way that makes sense.
‫And so let's now quickly create another one.
‫So again, this is usually the way we do it.
‫So creating a function which starts with handle,
‫and then we simply pass that function here
‫into the onClick prop or any other prop that we can use
‫to handle some other event.
‫All right, just to make sure that it works,
‫and indeed it does.
‫Great. So, this is how we handle events typically in React.
‫But of course,
‫now we actually want something meaningful to happen here.
‫And in particular,
‫we want to basically change this step value here, right?
‫And for that, we need something called state.
‫Now, we have touched on state many times already
‫but now it's time to really learn what state is
‫and then how we can use it in practice.