React and TypeScript Typing Children Exercise

[00:00:00]
>> So we covered some of the basic primitive types that we might see in an application. But we not only deal with properties that are strings or Booleans whatever in TypeScript, we might also see that a lot, one thing that we might pass in are like more sophisticated react components are other components right?

[00:00:29] So one of the easiest examples is children right? Well children's out a string or bullying or anything along those lines so like what do we pass in if we wanna have a prop, that's children. And so we're gonna have our first little exercise here, where we've got a box component and we've got a whole bunch of different use cases around it.

[00:00:54] I'll actually switch over here, we've got a box, and really all it does is render children. Right now that is defined as any because we haven't figured out yet how exactly we want, we don't know what what property is here, right? And one of the things that we saw when we hovered over name tag, you're like, well, name tag returns JSX element, right?

[00:01:21] So maybe that's what it is, there's a bunch of options that seem plausible if we poke around react, there is JSX.element, there's an array of elements, there's one given one, or this is the symbol for or a array of them. We've got react node react children, react child, a array of react child, which is different than react, children.

[00:01:46] There's a bunch of different things this is where it starts to get a little bit tricky because it's not necessarily always like particularly well defined. So what I want for you to do kinda our first exercise together, spend a few minutes and go through and figure out try all of these out is currently typed as any.

[00:02:02] What we wanna do is we want to figure out which one of these will prevent us from getting wet red squiggles in our actual component here. So try them all out we'll see and then we'll kinda figure out which one the winner is and, we'll talk about it.