Check out a free preview of the full React and TypeScript course:
The "Typing Children Solution" Lesson is part of the full, React and TypeScript course featured in this preview video. Here's what you'd learn in this lesson:

Steve livecodes the solution to the Typing Children Exercise. A students question regarding if there is a difference between using React.ReactNode versus React.ReactChild or React.Children is also covered in this segment.

Get Unlimited Access Now

Transcript from the "Typing Children Solution" Lesson

[00:00:00]
>> So the challenge is, we don't want to take the shortcut here, we don't wanna use any, right? We want to correctly define what kind of property, children should be using the correct type. As I said before, we have a bunch of options. So let's try some of them out.

[00:00:22] Let's try JSX dot element. And you can see that it works some of the time, but not all of the time. And one of the reasons for that is, if you look it works on the box and only has one child. But it doesn't work on any of the ones that have multiple children, right?

[00:00:45] Cuz we saw before those brackets, a lot of times, will work only for single objects and not for arrays. All right, so, I'll make an array. That changes things a little bit. Turns out, when we saw that name tag component before we returned a JSX element, and that seemed great.

[00:01:12] But if you look at what is not a JSX element it's a string. I mean yeah, we could we start to get real weird with this. Or we could say, this might even work. No, cuz now it's like, yeah. It'll take a JSX element but it doesn't take a string.

[00:01:30] So we could try to say or a string, but this is not the way forward for us. All right, so then we've got react dot react children. And if you look, there's a little bit of a difference here. I can see that, we gotta pull in react as well.

[00:01:58] All right, you can see that this is also still, yeah, it doesn't work for the multiple ones. It's actually just a helper function. This is not the right answer for us either. All right, so then, what about an array of React.React.Child. No. Again this one is also not working except multiple chosen but doesn't accept a single child less paired than some of our other options.

[00:02:28] Finally we have React.ReactNode. And this is the typing built into react for just saying, listen anything that would work as an HTML child. Which is a string, another HTML element. Or react opponent, which will eventually be HTML elements at the end of the day, right? React.ReactNode will be the one that finally satisfies all of these needs.

[00:02:53] Later on we'll look at some things along the lines of figuring out. Okay we wanna have a, React Node has certain props or stuff along those lines, but this is kinda about a highest level right now. So the question is, is there a difference between using React.ReactNode versus react child and or an array there of.

[00:03:13] Let's find out. One of the things that we can kinda, see here is, if you hover over you can get a sense of all of the things that React Node supports. So we've got string number, boolean, an object, a react element, portals, so on and so forth. Right, you can actually basically see, the entire definition of React Node in this case.

[00:03:39] This is all of the cases that it will deal with. If you go ahead, they might work in this example. But again, it doesn't have the idea of supporting some of those other ones as well. Let's see, it does appease this example, but it's kinda curious to see.

[00:04:05] This doesn't have all of the same options, it doesn't seem to have anything about having a portal in there or anything along those lines. So it seems like react children is a subset of everything you would get from React Node. Or react child is a subset of everything you get from React Node.

[00:04:19] The other question was differentiating react children and react child, which is actually, So React.Children is not a type. It is actually built in to react in the JavaScript library. And has a bunch of utility methods for working with the children in a react component. So it's like, which one of these types work, well, this one was a little bit of a trick and so far there's not a type.

[00:04:53] It has a type, right, but it actually has a count for each map to array and only it has a bunch of helper methods that we might use along the way. So it is not a type.