Typing Form Events Exercise

[00:00:00]
>> Steve Kinney: Now, we can argue, should I be passing that through? Should I actually have it have its own, like, onChange event? These are all various things that you can do. But the process of breaking stuff out and passing stuff through, again, involves, you don't have to memorize all these things, and I will show you a way to make this easier in a little bit.

[00:00:19]
But again, using the tools and just figuring out what the types are will get you all of the type safety without having to be like, I now need to learn everything before I can do anything, right? That is not the case. So your job at this point is to then try to pull out this form in the same way, and then we're going to look at some other interesting things that we can do as well.

[00:00:52]
So our mission was to handle pulling out the form, which we can make as complicated or as simple as we want, right? I'm going to choose the simple route, right, by just being a good React citizen, because sometimes I, you know, on top of my other thesis of like the best TypeScript is when TypeScript gets out of the way.

[00:01:15]
Sometimes I'm also going to argue if it feels hard, maybe that's an opportunity to pause and reflect. So like I intentionally took the easy one where I only had to pass in one thing. But this is kind of tricky because there's the set count to the draft count, there is the handle submit and the value, yada yada yada, right?

[00:01:36]
You're like, oh, this is, I hate this, I'm not doing this anymore, right? And we'll argue that just regular React will help you in this case too, because technically, this is a course on TypeScript and React. So like, React best practice is fair game. And so if the TypeScript hurts, ask yourself, am I reacting correctly?

[00:01:56]
That was not an intended pun, to be clear. Everyone's like I didn't get the joke anyway, it's fine. Cool, cool, cool. So we'll here, we'll call this counter form, I don't know, naming stuff is hard. And we'll just start with pasting in. And so I was angry but I was missing some things, so it's like, oh, I could pass in set count and draft count, and handle submit, yada yada yada.

[00:02:29]
Theoretically, this component only cares about the draft count, so guess what, it can actually just hold on to it itself and we don't have to pass that in. Right? Cool. And now we're really down to just the set count and the onChange being handle submit, but really handle submit is only arguably important to this component.

[00:03:00]
So the big question is, do I want to give it an onSubmit where we handle it ourselves or at what point did I thought onChange should be handle submit raises some questions. I mean, it's because I named it that, which is a stupid name because it was really supposed to be the onChange handler, so, no one called me out on it though, so that's problematic.

[00:03:25]
What I wanted to be able to do is let this manage its draft count. Nate thinks it's hard. Let it manage the draft count itself and then maybe give it an onSubmit hook so that when it gets submitted in one way or the other, like we can pass in that functionality. So I need to figure out what that's going to be like.

[00:03:51]
So in this case, we're going to say that it wants, let's give it a type. Do it up here. As a type CounterFormProps. And we'll give it an onSubmit in this case. And we'll see in a little bit a slightly easier way to do all this stuff. I'm mostly trying, it's almost like I have a plan here. We'll say that onSubmit should be a, what?

[00:04:27]
It should be probably like this FormEventHandler for an HTMLFormElement, that seems good. And we'll pull that in. And so now this component can have onSubmit that'll be those CounterFormProps. We'll just pass this in here. Great, and this will actually just be back to a change handler. Set draft count to e.target.value.

[00:05:07]
And again, the nice part is that you get to see all of the options as you type because IntelliSense is putting it all in there for us. What are you angry about? Oh, because I'm talking and typing at the same time. Great. We'll pass that in. And now we know that onSubmit works there. So now all we have to do is get rid of this form.

[00:05:39]
And we'll say this is a CounterForm. And onSubmit. And the nice part is because up here we said that, hey, when you get an onSubmit, that should be of the type of a FormEventHandler on a form element. We get all of that free stuff that we got from React itself before in our own case. So we can do e and we can do e.target.

[00:06:07]
Oh look, it's everything we saw before. And, you know, in this case, it'll be FormData, and yeah, we'll see all of that for free. So we can do new count is. We'll give this a target. This should be the, cool cool cool. Got the event listener on there. Oh, so yeah, so the big question is like, do I actually have it on the form in this case?

[00:07:41]
Let's go take a look. Let's see. Yep. So I can have the thing where I get it from the form itself. I am slightly spacing out on the syntax, to be totally honest, right, to pull it out of the form. Does anyone remember that offhand? If not, I'm going to look it up real quick. FormData, yeah. So FormData event, give me one second.

[00:09:13]
Forget the actual syntax off the top of my head. FormData equals. That event target or e.target in this case. Should be a form element event. There we go. Is that form element and then we can just say, actually, I need it down here. All right, give that the onSubmit. That'll be a form element, we're good.

[00:09:42]
And so now I could pass in the set count or I can actually, because this is actually a, that's getting proxy down into the form, I can do this as well. Decided to be a hero for a second thinking I memorized all of that off the top of my head and I didn't. So we'll say. And here we can say setCount is that new count.

[00:10:18]
Right. The other option would be the same way we did up here before is to pass in the set count, which is honestly what I originally planned on doing, but then I tried to be a hero. We can pass it through. In this case, I'm literally letting them pass in a form event handler that I'm putting on their self that does pass all the way through, but one has to remember the FormData syntax off the top of their head in front of all their friends, which can be fun too.

[00:10:48]
So found a form that we gotta close that tag. Cool. And so as we can pull stuff out other than the parts that had nothing to do with TypeScript or React and me just memorizing stuff while everyone stares at me, we can start to pass all of those things in as well. So now this becomes we've broken it out and we have all of these fun things.

[00:11:14]
Again, definitely an overoptimization for such a tiny component, but trying to demonstrate about like if you need to find the things, again, should TypeScript and React be able to help you. We can get it mostly from the ecosystem that we're in. If we have to remember that it's on a current target, you have to look at MDN real quick.

[00:11:39]
And you know what, I'm not above it. So the big question is, like, you could imagine that, OK, like that was cool. I had to go find like the FormEventHandler, FormEvent, so on and so forth. My buttons from earlier didn't have an onClick event, and we know that buttons have a lot of properties, forms have a lot of properties, so on and so forth.