‫Let's now learn how we can work
‫with event handlers
‫and how we update state in class components.
‫So just like before, basically here,
‫we now want to use the onClick property
‫in order to add an event handler to this button.
‫But now where do we actually write that event handler?
‫Well, remember how I said
‫that this render method here is basically equivalent
‫to the function body
‫of a functional component or a function component.
‫So I use these two terms interchangeably
‫so they're basically the same.
‫But anyway, since this is equivalent
‫to basically the function body of the functional component,
‫we might think
‫that this is where we now define our event handlers.
‫So just like we do in functional components, right?
‫However, that's not what we do in class components.
‫So in class components,
‫this render method should be as clean as possible,
‫so it should contain as little render logic as possible.
‫And so instead, our handler functions are defined
‫as class methods.
‫So let's define handleDecrement, decrement like this.
‫And so with this, we have a brand new class method.
‫And so here now we update the state.
‫But before we do that, let me actually show you something
‫that we need to do first.
‫So let me log the this keyword
‫because the this keyword is necessary all the time.
‫So we will actually also need it here.
‫Okay, but now let's then connect this onClick prop
‫with this handler function.
‫And the way we do that is again using the this keyword
‫and then handleDecrement.
‫And so again, the this keyword basically points
‫to the current component instance,
‫which will inherit this method here
‫from the class definition.
‫All right, let's give it a save
‫and then let's click this button.
‫And so you see that we get undefined or in other words,
‫that the this keyword inside this handler here is undefined.
‫However, we need the this keyword to point
‫to the current component
‫because that's how we will update the state.
‫So we will update the state by doing this.setState
‫and then here something.
‫So we are going to need the this keyword, but again,
‫it is currently undefined.
‫And the reason for that is simply the way
‫in which JavaScript works.
‫So when React calls our event handler here,
‫it first actually, behind the scenes, creates a copy
‫of this function.
‫And so then the function call
‫is just a normal function call,
‫which is not bound to any object.
‫And so because of that, this function then loses the binding
‫to the current this keyword.
‫But that's all not really important.
‫The only thing that matters to know
‫is that all event handlers that are called here
‫inside the JSX will lose their binding to the this keyword.
‫And so we need to fix that
‫by coming here again to our constructor method.
‫And then we basically need to override the method.
‫So writing this .handleDecrement is equal
‫to this.decrement.
‫And then we use the bind method
‫to manually bind the this keyword to this function here.
‫And so by doing this,
‫we basically give this method here access
‫to the current component instance again.
‫All right, and so if you ever come across
‫some older React code base,
‫you will see this kind of thing everywhere.
‫So this manually binding the this keyword
‫to our event handler functions.
‫And so now if we click this button,
‫you see that we actually get access to this object.
‫So we can see even the state,
‫the props that it received and some other stuff.
‫But that's not really why we're here.
‫So we are here to update the state.
‫And so as I mentioned earlier, we do this
‫by calling the setState method on the this keyword.
‫And the way this setState method works is very similar
‫to the stateSetter functions that we get back
‫from a useState hook call.
‫So basically, we can update state in two different ways.
‫We can just pass in the new state here
‫or we can update the state based on the current state.
‫So let's actually do the second one.
‫So by providing a callback function here,
‫which gets access to the entire current state object.
‫So let's call it currentState.
‫And then let's actually explicitly return
‫the new state object here just so we know
‫that this is what we need to do.
‫So we need to return a new object where the count property
‫is then updated.
‫So we can get the current count
‫from curState.ount, and then we just add one.
‫Okay? And that's it.
‫And while that's actually the opposite direction,
‫so we want to subtract one, but in any case, that's working.
‫Great.
‫So we just made our first class component dynamic
‫and are already updating some state.
‫So we're doing great progress.
‫Now let me just show you the other way.
‫So let's remove this.
‫And so here we could also have passed in simply a value.
‫So setting the count, for example,
‫to 10 whenever we click here.
‫So you see that works as well.
‫But of course, here we want to setState based
‫on the current state.
‫All right, and by the way, notice how all the concepts
‫behind React that we have been talking about before
‫still apply to class components.
‫So things like updating the state will rerender the UI
‫and all things like that.
‫So those fundamentals haven't changed.
‫The only thing that's changing
‫is that we write the component
‫in a completely different way.
‫But anyway, let's now just duplicate this code here
‫to create or handle increment event handler.
‫And then here all we need to do
‫is to just change this to plus one.
‫And then here also attach an event handler function.
‫So the one that we just created.
‫So handleIncrement.
‫And just like before, of course, we do not call the function
‫but we simply let React call it as soon as we click
‫on the button.
‫And so, ah, we got some error.
‫Well, why is that?
‫Ah, of course.
‫So I just told you before that the this keyword
‫will lose its meaning basically.
‫So inside handleIncrement, it will no longer point
‫to the current component instance.
‫And so that's why we fixed that, this binding right here
‫but we forgot to do the same thing for handleIncrement.
‫So let's fix that, give it a save.
‫And so now it should work.
‫Yes.
‫So never forget to do this because you see
‫that the consequence is that your app will not work.
‫Okay?
‫And so now let's, instead of just displaying
‫the number here, display the date.
‫So just like we did before in that date calculator.
‫And so this kind of very simple render logic
‫is actually allowed here in the render method.
‫So we just shouldn't define functions here like we do
‫in our render logic in functional components
‫but some simple logic like this is allowed.
‫So we define our date.
‫Let's just pass in a string here
‫so that JavaScript can parse the date object out of it.
‫So let's say we are in 2027, and then we want
‫to set the date on that to date.getDate.
‫And this is similar again to what we already did before.
‫So we're just transforming that
‫to a class-based component.
‫Right, so here you basically want to add the current state
‫to this state.
‫So that's this.state.count,
‫which again is a lot of work
‫where in functional components,
‫we would simply call that count, right?
‫And so let's just place that here.
‫So date and then toDateString.
‫And then let's place this here into some brackets.
‫And that looks a bit too big now.
‫Okay, and you see that it is working indeed.
‫Okay, and so with this,
‫we finish this short introduction to class components
‫and are now ready to build the classy weather application.
‫But before we go do that,
‫let's just quickly learn all the differences
‫between class components
‫and function components in the next video.