Switch, Dynamic, & ErrorBoundary

[00:00:00]
>> The switch component is actually fairly similar. See, the problem is without a switch component, you might get in a place like this where you're like, show when x is bigger than 10, and then fall back, show if x is smaller than 5. And then you start having to nest these if you actually want a bunch of conditions.

[00:00:25]
And if you're using ternary it's no different, right? You have a bunch of question marks, and this is where things start getting kind of messy. So this is where we came up with these switch and match component. And it's kind of an interesting pattern cuz it can show that solid components are just functions and literally can return anything.

[00:00:44]
So what I'm gonna do is instead of having all of this logic, we're gonna make a switch. And then, sorry, switch takes a fallback and then each condition essentially is expressed through a when condition on the match. So let me see here, so the final fallback is this one nested in here, it actually took me a second to find it.

[00:01:11]
No, actually, is it this one in here? No, I think it's this one, okay. This is kind of the problem of nesting ternaries or show components. So we're gonna switch, and then switch should have matched children. And we're going to make a few of these, just kinda move our logic back around again.

[00:01:35]
So we want first condition when x is bigger than 10. And while this can be a little bit more verbose to type at first, the way it lays out works out relatively nicely, okay, cuz the logic is more serial, okay? And then, Match. Yes, I'm getting all the red lines because of, I just turn this off for a second.

[00:02:10]
[LAUGH] Still getting the red lines, because the fact that it thinks I'm returning two JSX elements right now, but I'm using the other one as reference. Was it when here? And it's this one. And then is that all our conditions? I think so, I think I can get rid of this original show component.

[00:02:44]
There's too many of them. And then, Yeah, I mean our example never updated the x, I don't think. But this shows how we can drastically compress that logic kind of using these components. Essentially, match, actually, funnily enough, the way it works is it actually just returns the prop objects and it's actually the switch that does all the reactive logic underneath.

[00:03:18]
So this is just a very simple pattern for conditionals, probably won't dwell on that too much. Dynamic is another one. Usually either switch or dynamic, when someone tries to naively create routing in Solid, they usually just end up just making a switch statement or using a dynamic. Cuz you can basically have the pieces to create a very simple router doing that.

[00:03:43]
But, well, switch works perfectly fine in this case, where we're going switch fallback show the blue thing, otherwise it's a red and green thing. So you can see, as I change this, it just does the switch. We can also simplify this a significant bit if we could just look up the component essentially from a lookup table here.

[00:04:10]
So I have options here. So we can just basically dynamic, and I'm just going to do that. And then dynamic has a component property where you can actually just put it in. So in this case, what was it? It was options and our selected value. So instead of writing all these equality checks yourself, you can do this and get rid of that.

[00:04:41]
And now, this component will be whatever this component is that we pass the props. And the way this works is you can actually pass other properties here, like whatever properties you wanna pass to that component can also just be added to it. So you have the ability to basically just push it down.

[00:05:00]
And in this case, we're using components here, so that we have our working example. But dynamic could also, I don't know, we could add something here like, I don't know, other. And we can go div, let's say. And we're not gonna really see div, I'm trying to give us something visual that we can see, but essentially, It will render.

[00:05:33]
Actually, We can kinda cheat this, can't we? Children, I mean, I could also just pass this as children, but let's just do this. These components that we have red and blue thing, they don't do anything with children, so I'm just kinda cheating it. But if I pass children through here, the div should get the child.

[00:06:00]
So then it's a div with a hello. So yeah, you can use this both to render components or dynamic elements, okay? And [SOUND] ErrorBoundary, I love this example, cuz it's silly, it just make a component that throws an error, obviously, never getting here. What error boundary lets us do is somewhere higher up in the hierarchy of our app.

[00:06:31]
And I'm gonna actually wrap this here, cuz I don't wanna interfere with before and after, but we could wrap our whole thing in here. But ErrorBoundary gives us a way that if there's any errors that are throwing during rendering, it basically just fix it here. It contain this error from Broken and still shows before and after.

[00:06:51]
And we can provide a fallback to it, where we can put something else in, like, I don't know, we can go, we can just put in like, it doesn't actually matter. First thing we can do is just put in a string and just be like, Error, right? But we can also get the error passed in as a function or we pass a function to this, and then we can actually display the error, right, so that way we can style it from the error message.

[00:07:25]
And we even have the ability in here to pass, the second argument's actually a reset, which will try the ErrorBoundary again assuming this condition is changed. But yeah, this is basically ErrorBoundary. So you can see it's basically another conditional rendering mechanism.