Typing Component State Exercise

[00:00:00]
>> So, we've got all of that in place. I can't set it to anything that it shouldn't be. So, my challenge for you, and I kind of alluded to some of the nuances here and like Mark explained to us, event target dot value s number, so we all get to try that one out for is.

[00:00:19]
We know how to type a change handler, right? We know most of how to handle this form. And so, we want to do is also have where they hit update the counter to a given number that will also work. Right, so maybe tempted to do something like this.

[00:00:36]
We'll say, we got to store it as a separate value because it's not like when the input changes, it's one of those submitted so I got to store that separate value for a hot minute. Call it draft count. And we can start off with count. But unless I do something in here, TypeScript's going to make sure I don't accidentally end up in a situation where the input field bites me.

[00:00:56]
So, we have that in place, and we can do, We can do windows changes. Yes, we got, we can do it in line, or we can pull it out we'll just say that we want to change it to the value of this input when it changes it. Cool and because it's a number, it is angry with me.

[00:01:24]
Right, and that's nice because I don't want to talk to you about how many times, I've made this mistake. As I'm just in the zone because it's like I'm already resentful that I have to do this rigmarole with react of taking the value and I can't just bind it together like other frameworks that will go unnamed.

[00:01:42]
And so, a lot of times, I'm in the middle of some other thought, I'm doing this because it's a chore and I'm supposed to, and so but it's like, you accidentally pass a string in here and that's great. Like yes, I wish that didn't happen. So Mark taught me about dot.

[00:01:59]
>> No, just the post fix.
>> It's one, property it's just value capital A, What? And also, I believe you because autocomplete believes you, right? Also we learned that that exists. Do we all know about this one that has date? Mark say yes. Yes, I saw how people didn't know so, And now it is a piece with me, which is pretty great.

[00:02:30]
Otherwise, I can keep it as a string and then do this somewhere else as well. Is that just on, I was just event target various numbers, that's pretty cool. The other thing I would do is just keep it as a string and then coerce it to a number when I needed to, but now I don't need to do that.

[00:02:45]
Awesome, and then so like we have that on change and then really there is the on submit. Which is just going to take, And I know that everything is working as it should because I didn't get yelled at, which is a general rule for life that I follow.

[00:03:09]
And we can do, awesome. Now what if we wanted to say that, when that input field changes, let's validate that any of this works before I get a little too overzealous. Let's see, if you don't, let's say do we see the file, no.
>> No, I have values set to 0.

[00:03:29]
I might want to change it to dynamic, to draft count.
>> Yep, there we go. Yeah, what I'm focusing on the type of stuff sometimes I forget to think about the just the regular jobs, you know, regular how things work in code. Awesome, say 15. And this is why you live code with all of your friends.

[00:03:48]
>> The button doesn't have a listen to There.
>> It's all, yeah. Because this needs to go in the form is what hap needs to happen. I don't want it on, you can't submit an input field, or you can, but like, what I want is that to happen in the form itself, which is the whole reason that I made a form to begin with, was to make my life easier for when we did this together.

[00:04:08]
Cool, now if I wanted, in this number then update the input field I only decrement, we're only going down and I wired it wrong which to be clear as someone who rehearses all this stuff I'm the point where I've rehearsed it wrong so many times that now I do it wrong because I think about increment reset and then decrement but the buttons are in the opposite order.

[00:04:31]
But now I have like literally just don't ever hear that so many times that now it is what I do. So that's great, you learn to think about me today. Awesome now do we need to say that when we change the regular can we want to update the field as well?

[00:04:50]
We don't I just need an excuse to use a use effect hook just show you one little gotcha that might come up with us effect is lots of gotchas. Let me clarify one TypeScript gotcha that might come up with you as affect us if effect is just basically like, would you like a foot gun?

[00:05:13]
Cool, and so we'll give it a function that says whenever count changes, we also want to update the draft count. And the only kind of real place that TypeScript and use effect interact and this is a lot of times happens with like a set timeout. As well and so I just kind of JavaScript fanciness these days, which is unset, draft count everything's great.

[00:05:38]
Everything works good. The only place you will get yelled at is if you're like, I'm going to be fancy and I don't like curly braces See this actually gets because these returns void if you had something that returned to the actual value here, it's like because normally if the returns it's expecting a function returned to or undefined.

[00:05:59]
And so, if we said, even, Just return the count for instance, right? You get yelled at because it has to be undefined so just make sure if you ever see that you get confused is because it's expecting either a deconstruct or function or undefined and it will yell at you about it.

[00:06:20]
That is just the, it will happen to you once in the next year. You will get bitten by it. Hopefully the sticks in your brain, I have saved you a good 10 minutes.