DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cassidy Williams for Netlify

Posted on • Originally published at netlify.com on

React Children: The misunderstood prop

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>
)
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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"} />
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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)

Enter fullscreen mode Exit fullscreen mode

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!

Top comments (2)

Collapse
glencodes profile image
Glen Burnett

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

Collapse
threehourcoffee profile image
marie ng

Thank you for this clear explanation! Never really understood children (the react kind) till now!!!

🌚 Turn on dark mode

πŸ”  Change your default font

πŸ“š Adjust your experience level to see more relevant content

Β 

Head to your account's Settings to do all this and more.