Intermediate React, v4 ErrorBoundary, Carousel & Pet

Transcript from the "ErrorBoundary, Carousel & Pet" Lesson

[00:00:00]
>> So pop over to error boundary .js and renamed this to error boundary .tsx. And you can see here we actually only have errors here, everything else is looking good. And so luckily this is an error, as you might guess, is an error. That's kinda nice, right? Kinda descriptive?

[00:00:28] All right, can you guess what info is? It is ErrorInfo, This one we actually do have to import from react, so little cheat here. You can see error info, it comes from react, if you just click on that. It'll actually just automatically import it for you. That's it, congratulations, you just did error boundary.

[00:01:00] So, I mean, again, that's what I was saying about whack a mole with TypeScript errors and things like that is, frequently it's really simple. Some of these files, you might not even have to make any changes. You just change the file extension, it's gonna be like, cool. I got everything let's keep going.

[00:01:17] So it's good to always check. So let's go do carousel. There's obviously gonna be a little bit more, or maybe not obviously, but there is more to do here. So we're gonna rename this to carousel.tsx. Up here at the top from react we're going to import, MouseEvent and ReactNode, Okay?

[00:01:42] Here above Carousel we're gonna do an interface. And again, you can call this I props or props. I frequently still call it I props because the the TS lint rules that I used to use before the TypeScript es lint came along required that you called interfaces I props I don't know if it's useful or not, I mean, the thing to always keep in mind is if you see an I there, I think this is like a .net thing, if I remember correctly, which makes sense TypeScript came from.

[00:02:15] Anders Helzberg, which wrote both Typescript and C sharp and so that community has a high amount of overlap, anyway up to you. It's up to you if you want to use that Iprops which is called props. Images is a string array, that's the kind of props we're expecting here and here under component, we're gonna call this Iprops, okay?

[00:02:39] So now we know that carousel is a component that expects a string array called Images, okay? Active is already good here, we already know this is gonna be a number that's great. Let's go down to handle index click. So our event here is going to be a mouse event.

[00:03:04] And the target of that is going to be an HTML element. Okay? So now that we know that that's an event, this is a specifically a mouse event from react. You could have just said this was our mouse event from the DOM and their shapes are the same.

[00:03:22] But it's good to be specific if you know the difference, okay? Here it's gonna say like well, I don't know if we're gonna get this cuz this could be no and that would make this something other than a number. So, we need you to be a bit more specific about this.

[00:03:41] So, we have to be a bit more defensive and say if event.target is not an instance of HTML element Then return, okay? Then we have to ask, okay, now we definitely know event.target is a HTML element, cool. And then we have to ask again event.target.dataset.index. And then set this to be that.

[00:04:30] Now, again, this will annoy some people, this was working before. Why do I have to be so defensive about this and it's just to appease the TypeScript Gods cuz now you're guaranteed? But if you get down to here, this is definitely there, so therefore we can do that and everything will be fine.

[00:04:50] But another fun thing here, I think if you delete this, save it It makes a string, interesting, and it's fine with that. Now it's a number, I thought it would have been upset by that. Yeah, no okay, sure. So, Yeah, again you can specify an I state here if you wanted to, and say that active is a number, but implicitly it gets that from here.

[00:05:35] Cool. I think I had here in my notes, you can see that this is a void return type here if you want to cuz it's not returning anything. Again, in older versions of this course, we used the TS Lint rules which required you to specify the return type of everything, which was annoying as hell.

[00:05:54] Luckily the new versions of this don't, so we don't have to do that anymore. In fact, I think I have reenact node here. We used to have to specify here that this was a returning a react node, in which it is, right? But these new Type Script rules I think are better because it allows you that implicit return, we know that's returning a react node.

[00:06:12] That's not useful to anybody to say that that's returning a react node, so you can get rid of that. It also used to require you to put public on all of these cuz they're technically public methods. Again, it's obvious that they are? I didn't like putting it in there, but it used to require that.

[00:06:33] So, don't have to put that anymore either. Okay, so I think carousel is done now. No errors, everything looks happy. Any questions about carousel?
>> Earlier you had mentioned something about default props and using an interface and how if we have a default props assigned, we didn't have to use interface, could you just explain what is happening herein that regard?

[00:07:02]
>> Sure, yeah, I think you probably couldn't just leave this off. Is that true or, It doesn't. I think there is a way to get that to work together and I don't remember how I did it. Yeah, cuz this should be images which is a string array. Yeah I'd have to dig into it, I can't remember off top my head.

[00:07:36] But that is one thing that you can get working. And obviously it's enough here for state. Yeah, it might be having issues with the class properties. I think maybe if you do carousel.default props equals blah and move this down here. Nope, still upset by that. Okay, yeah, I don't know I'd have to go look.

[00:08:29] It's okay, the way you are represented here makes more sense to me, I feel it's more readable anyways so,
>> I mean, if it's more readable absolutely do it that way too, yeah, cool. Good question though. Cool so you can see TypeScript dash three now. If you wanna get up to the point on the migration that we're in at the moment, get rid of that too.

[00:09:03] Okay, I think now if we went back to details, Sometimes it won't update quickly. It's still upset by Carousel, I wonder why that is. Anyway, it'll eventually sort itself out, I find that frequently, I can delete pet out of there and details as well. It's that they work really hard on the backend of the TypeScript server that's running in JavaScript to make sure that it doesn't slow down VS code.

[00:09:42] So it doesn't always run your code when you expect it to. So sometimes it'll show you errors when you don't have errors. So, I advise you to have a healthy amount of distress is like, hey, there's an error here, maybe it just hasn't run yet. I mean, if you can always do a reload window, that's always gonna fully run it again.

[00:10:13] And now we're not seeing any errors. So, Where is it? There is an error in this?
>> I think it's this.props.params id line 24.
>> Line 24, oh.params.id, cuz we didn't make that defensive, right? So sometimes the, that's a good point. So if, This.props.params.id, then return. And that'll fix that.

[00:10:57] Right, cuz the problem here is we made id optional. So we have to be defensive like, hey, if you didn't get ID here, then don't try and request something from the API. Cool, and now details is fully good to go.