0:01 The way that we figure this out, we learned a few lessons ago. What we do is we hover over this onClick here. You can see that there are various different things here. The main one that we have is it's saying, onClick is a optional property, that's what this means, and it's either React.MouseEventHandler or undefined.

0:22 If I copy this over, and I put it on these ButtonProps up here, we have onChange, and let's say we do it like this now. Sorry, onClick rather, onClick is the one we want.

0:35 Now, what we have is React.MouseEventHandler, HTMLButtonElement or undefined. What we ideally want here is we want to make this required. The user has to pass an onClick.

0:46 Now, if we go, const Parent = this and return our Button, then we're going to have to pass in Children. We're also going to have to pass in a className. Yeah, that will do. We're also going to have to pass in onClick. There we go. That's the way to handle it. You just hover over this and see what it takes.

1:09 Let's just examine some of these for now. We have our MouseEventHandler here and we're passing it a HTMLButtonElement. If we command click into this, you'll see that it's not coming from React itself. Is it coming from React itself? Oh yeah, sort of is. HTMLBRElement...I see.

1:34 What's happening here is HTMLButtonElement, it comes into a couple of different spaces. It comes in from the DOM here, the DOM typings. This is where it picks up most of its juice here. We've got HTMLButtonElements. This is where it brings in all of the different properties that are here.

1:52 Now, if we pass in a different one here, HTMLDivElement, then it's going to yell at us. By the way, I'm not needing to import these HTMLButtonElement or HTMLDivElements. They're just globally available.

2:05 If I put the wrong thing in here, then it's going to yell at me, because Type MouseEventHandler, HTMLDivElement is not assignable to MouseEventHandler, HTMLButtonElement. You have to be quite specific. You can, I think, can you do HTMLElement instead? Yeah, and that works.

2:21 If you want to be more general, that's what you can do. I think you can even just remove this. You can just say React.MouseEventHandler, if you want to be more general and you envisage this, for instance, just being a div or a button here. There you go.

2:37 This gives you the ability then to when the user uses this onClick, they will get access to this (e) in here, which is the event. This is just a React.MouseEvent with the Element and that Element responds to this MouseEventHandler.

2:52 I can say, HTMLButtonElement. That's going to flood through into there now, which means that e.currentTarget, this will then correspond to that buttonElement in there.

3:05 If you don't care so much about the specificity of it being a button on currentTarget, and sometimes you will and sometimes you won't, then you don't really need to worry about it. CurrentTarget will end up just being an Element there instead of a HTMLButtonElement.

3:21 That's how you handle when you have this native event or native handler that you want to just extract the type out of, just hover over it, see what the property is, copy and paste that into the onClick. In general, you can remove some of these more specific elements and just default them to their basic elements. It just accepts anything and then you're good to go.

3:47 If we wanted to make this optional, of course, we could do this and then I wouldn't need to pass it at all. That is how you handle onClick handlers, onChange handlers, onAnything handlers in React.