Props & Children

[00:00:00]
>> We're gonna first look at talking about props and handling props so this was mentioned before about handling default. So let's pretend we have a component that's our greeting component, and right now, we are setting the defaults by essentially going greeting or hi or props.name or John.

[00:00:30]
And don't get me wrong, if you got simple stuff, this is perfectly fine to do. It's probably the most performant way of doing it. We just have a condition and we decide if it's there short or not, but what if you're using these props in multiple places, you don't really want to maybe go through and every single place put the defaults, it's error-prone.

[00:00:54]
So, merge props does help us here, right? And, it lets us basically pass in essentially an array as many objects as arguments as we want that we wanna merge together. So, in our case, we want them to actually be the defaults. So we actually put the object first so we might be like greeting, Hi, and name John, did I have it, yeah John.

[00:01:27]
And with this suddenly, instead of doing props.greeting or whatever, we can just kind of get rid of this now and just be like merged or let's say merged, and, and we still get our default behavior of when we don't provide it. We add an extra h, we get the default values depending on if they're provided.

[00:01:57]
But we can do other things too, right? We can put the arguments after and then they sit on top, it's basically like a function version of the term I guess like a spread essentially. So, similarly split props where what if we wanted to pull a few of our props off, again, this works the first time you render because these values are real.

[00:02:32]
But the problem is they won't be reactive when you update. So, in this simple example, if I click Set Name, it's never updating because it only ran the first time and you accessed. The problem is when you do these spreads, you're actually accessing the reactive variables at that point and not under an effect.

[00:02:50]
For that reason, we have local and others, let's say, often people actually, very common pattern here is actually just to not even do that. You can shorthand your tuples by just putting a comma. And then we can split props, and then we can pass the props in. And then we pass an array of what we want out of it, which in this case, I think we're looking for greeting and name.

[00:03:21]
And if all works well, essentially I'm just gonna do props.greeting, but it could also be this. We now have pulled these properties off, so when we spread on to the h1, we don't get a bunch of extra stuff that we don't need on it, we're not gonna serialize name on our header element.

[00:03:46]
And now when we update, so it went from Jacob to Jarod because we maintained reactivity. The last helper I wanted to show was a children helper. And the idea in this example is that. So we have a colored list parent component that's actually interested in what we map back from the children.

[00:04:16]
So we actually have a for list, and for each color we're actually passing in these items, right? And then the colored list goes, I wanna do something with them. So like essentially, while this example is a little bit trivial, we could pretend like we wanted to actually map over them again.

[00:04:45]
Maybe update them, had some color to them, change the element. And we can do this as basically by using our children helpers. So what we're gonna do is, it's the only thing that's a little bit fun about naming the helper children [LAUGH] is that You can't use it as a variable name, something that occurred to me much later, but here we are.

[00:05:18]
[LAUGH] But, we have now resolved the children. So that inside this memo, we're gonna actually have real DOM elements, and for the sake of this example I'm gonna create an effect and in our effect we're actually gonna go. Okay, give me those children and for each of them I'm going to actually do a DOM thing on them, I'm gonna go item.style.color equals I don't know, red.

[00:06:00]
See if I get that wrong, Let's make it props.color, okay, even better. Then we have the ability for a parent component to basically introspect on the parent. What's important to remember though is we're still accessing props.children down here, which means we're accessing it twice. So we actually should also update this to use our result children.

[00:06:23]
And this is the other purpose of the children helper. If we need to resolve the children multiple times, we don't want it to render multiple times. So for that reason, the children helper let's us do introspection. Most of time you're just gonna pass it straight through, but if you actually need to do work with it, this will let us operate without doing re rendering.

[00:06:40]
So now, we can see that we're getting our purple color being set by our forEach, and when we set the color to the new color we now get a nice teal. So, this is powerful pattern because it lets you take a parent component and augment the children.

[00:06:56]
Use sparingly, admittedly because it's a bit of an abstraction leak, because for example, here we have to know that we're dealing with real DOM elements. So, if you're using making a generic component that works on multiple platforms, you might not want to do this but it is still a pattern that exist in solid.