Welcome to Blogvent, day 17!
Children are misunderstood. I’m talking mostly about React children, we can talk about human ones another time.
Let’s go through step by step why children are weird, so you can understand them better. Again: React children. Not humans.
Children are props
Chances are if you’ve written React before, you’ve dealt with props and children in some way. Let’s say we have a super simple button component:
const Button = () => (
<button>
I am a button.
</button>
)
If you want to pass things to this button, you would use a prop.
// our button
const Button = ({ color }) => (
<button className={color}>
I am a button
</button>
)
// somewhere else
<Button color="red" />
If you want to make our button say more than just “I am a button,” you can pass children to it.
// our button
const Button = ({ color, children }) => (
<button className={color}>
{children}
</button>
)
// somewhere else
<Button color="red">
I am still a button
</Button>
By passing children in this way, you are passing it to the component by position. Now, if you notice that little header there of this section, I call children a prop. Did you know that it can be passed as a named prop, too?
// turn this
<Button color="red">
I am still a button
</Button>
// into this
<Button color="red" children={"I am still a button"} />
These two syntaxes produce the exact same result on the page! Children is a prop, and can be passed in to components in different ways.
Children can be an object or an array
Sometimes our children act differently, and that’s okay.
If we were to run the following what do you think would be logged?
// our button
const Button = ({ color, children }) => {
console.log(children)
return (
<button className={color}>
please, my
{children}
are starving
</button>
)
}
// somewhere else
<Button color="red">
<h1>Oh</h1>
</Button>
Logged here would be an object that looks something like, {type: "h1", key: null, ref: null, props: Object, ...}. Okay. So children is an object. But what if we change up the children in the button so there’s more of them?
<Button color="red">
<h1>Oh</h1>
<h2>My</h2>
<h3>Goodness</h3>
</Button>
Logged in our terminal would be [Object, Object, Object], because children is an array.
Gosh, make up your mind, children!
The data structure for children can change depending on how many there are. If only there were a way to deal with these children!
A way to deal with these children
React.Children is a module that helps you use children better. It has a bunch of functionality so that you can avoid type-checking every time if it’s an object, or an array.
// Turns children into an array
React.Children.toArray(children)
// Counts the children
React.Children.count(children)
// Makes sure there's only one child
React.Children.only(children)
// Lets you run map over children without having
// to worry about if it's an object or not
React.Children.map(children, fn)
// Lets you run forEach over children without
// having to worry about if it's an object or not
React.Children.forEach(children, fn)
Can we talk about human children now?
No, unfortunately we’re out of time. React children are a funky thing to deal with, but if you use them right, you can unlock the ability to make more reusable, flexible, and composable components.
Til next time!
Oldest comments (2)
Interesting article. Thanks for this. Im sort of learning backwards. I kind of knew React a little bit, but I'm learning Next JS much more. I'm realising knowing React a bit more will help so Im sort of backtracking, so stuff like this helps alot. Looking forward to future articles and shenadigans
Thank you for this clear explanation! Never really understood children (the react kind) till now!!!