This course has been updated! We now recommend you take the React and TypeScript, v2 course.
Transcript from the "Asynchronous Events Solution" Lesson
[00:00:00]
>> All right, let's get this working because I think it was gonna tie a few of the different things that we've talked about so far together. And then we will be able to kind of like pull out some of the pieces and like get a little bit more sophisticated with some of the future examples.
[00:00:17] All right, so if we think about, kind of in our react hierarchy sure the input field that has the number is in the form component over here. But we know that like, roughly we need to figure out how to like, yeah, we can make arguments the best way to structure this.
[00:00:36] But we know that like roughly the state of how many DogFacts where we fetch everything is going to have to happen in application. So we'll define that over here. We'll just say value, you set value. Give it one, one cuz it's different than three at this point. So we've got that as well.
[00:01:04] And now we know that we need to pass at least that number into the form or something along those lines as well. So we can kind of think about that too. I'm actually thinking as I meditated for a second, like, do I really wanna actually pass that in and the ability to submit the form.
[00:01:22] I might just wanna pass the ability to go fetch in there. So I'm actually gonna move this into form as well. Cool, so we're gonna say value and this point we'll put the value in here. All right, so that's now a one. And as the changes we will set the value.
[00:01:43] And we know that if i inline it, I don't necessarily have to put all that type information in there. And like what you should do usually depends on how busy, like if you wanna pull it out, that's fine. I'm not saying you should inline every change handler, cuz there's definitely a point when I get it.
[00:02:02] You lose a lot of usability and stuff like that. But it does allow you to not have to define the types which seems good for us right now. But as exercise to reader like I would move it around, figure out. I think the important distinction is to know that there is a difference in how they act as well as actually, cool.
[00:02:24] So we've got that. We can see that now this is changeable. All right, we're getting there. Now we want the ability to fetch said DogFacts. One of the things we haven't really talked about. We haven't done a lot of passing functions as props. And so this will be kind of our first chance to go ahead and see how that might work.
[00:02:43] As you can see, that there is some onsubmit happening here. We might wanna call a function that we pass in, to this child component. We haven't really talked about do that yet, but I think we have all the requisite information. In the application itself, we could say something like all right, when we get our facts, we'll second facts and set facts.
[00:03:09] Will react that you state and I could say that it's an array, that seems like a fair thing to do. And we're also going to create a handleSubmit function, which is simply gonna say you give me a number I, which is gonnabe whatever's in that form over there.
[00:03:29] And I'm going to go and fetch some DogFacts, effects that many DogFacts. And then with those facts, we will setFacts to facts. That was a lot of the same word over and over, and I've got a red squiggly. A part of that is that there's a space in between my equal sign, my arrow but there's another red squiggly.
[00:03:55] It's like hey, so TypeScript is actually figured out what the shape of the facts is. It's like is an array of objects that have an ID, which is a number and a fact that is a string. All right, and I simply want to replace the empty array with my array of facts.
[00:04:16] But you look it's, hey, we only expect that there should be facts plural. We only expect the facts is if you look at it as an array of never, all right, we have over here as well, an array of never, right? Because we saw before in that kind of early run through the common types, you can have a array of strings, you can have an array of numbers.
[00:04:43] Now we could do a bunch of stuff here. we could say like, any as long as it's an array, it could be an array of anything, and that will theoretically get TypeScript off her back. However, we've just lost all the type safety. So why is it up to this point?
[00:04:57] And so in this case, just giving you an empty array, cuz if you had given an array of like let's say I put some numbers in this array. Like this is not gonna make TypeScript any happier about what we're doing. 1, 2, 3, you can see that it has figured out that this is actually supposed to an array of numbers.
[00:05:14] That's cool. But we don't want numbers, we want DogFacts and like, we don't have them yet. So what we can do this is again that question someone asked really well befor. What happens if we have to step in and tell TypeScript what the type of that we're expecting is?
[00:05:34] So in this case, we're gonna say, listen, I know I gave you an array, you tried to be helpful, cuz it was an empty array. And you knew that was an array of nothing ever. In this case we'll do, we have this Dog Fact type. And we're gonna say it's an array of those.
[00:05:53] So now you can see all the red squigglies are gone at this point. We've got the ability to kind of, we know that it's gonna be started as an empty array. You can still have nothing in your arerray of Dog Facts. But we now know that it will accept replacement arrays as long as they are filled with DogFacts.
[00:06:10] And so now we can use that here as well. Now we wanna pass in, we wanna say all right, the form when we'll give it like an onSubmit prop, which is what we're gonnapass in here as well. So we'll say on submit, it's gonna be this handle submit, right?
[00:06:35] Okay that's interesting. Red squiggly of doom, right? Like I don't know what that property is. The cool part is if you're trying to figure out how to type this and TypeScript. Yeah, you could like, go read the docs. So what ya redox is great, Redox is wonderful. Or you just look at it like, hey, like here's the function, you tried to pass in.
[00:06:58] We don't have that defined as a prop, but it kind of gives the answer to the question here about what the form props might be. Which is make, maybe it has an onSubmit property, which is a function that takes a number and returns void. I'm like, yeah, yeah, that's exactly what I want, right?
[00:07:15] So here we could say, form props. So you can do it in line if you want. So type form props. And now we're gonna say that Submit, so the thing is getting passed in and that's gonna be our form props. Right, so now that is, we can actually say like call whatever was passed in with whatever the value is, right?
[00:07:47] And again, that's a number so everyone is happy. TypeScript has kind of looked like, okay, you're passing in a callback function that we know works in here. Cuz you defined what this component expects, we now know that the call callback functions to get the right value. It's basically like kind of checking on everything for us, and confirming that everything will work in this case.
[00:08:08] And then really the last part here is to once we have some DogFacts, and since it's an empty array, we don't have to do as much of that checking as we did before. We'll simply say map over the facts. Let's say the key is fact id. The fact, That fact not my favorite API in the world, but I made it so I have no one else to blame but myself.
[00:08:49] To be clear, I did spend time thinking about what I wanted it to be and I couldn't come up with anything better. Go ahead, we can fetch some Dog Facts, right? So again, one of things I wanna kind of take out of this is it's react as you know it.
[00:09:03] And a lot of times if you're like, find yourself somewhat confused about what you would need to do to make TypeScript happy. The thing to do is kind of like use what, I'm using Visual Studio code and code sandbox is just effectively videos Visual Studio code in the browser.
[00:09:22] But if you use this tool to kind of get the hint of what it's looking for. That actually solves a lot of it for us, right? And you can kind of like get to figure out like what this component expects and use those tools, but we also learned how to pass.
[00:09:39] This is the syntax we saw before, but now we've gotten to do it in practice.