---
title: "React Children: The misunderstood prop"
description: "Children in React have a changing data structure, there’s multiple ways to use them, and they have a module. Let’s deep dive into how to use them!"
source: "https://www.netlify.com/blog/2020/12/17/react-children-the-misunderstood-prop/"
last_updated: "2026-07-15T18:34:06.000Z"
---
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 buttonconst 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 buttonconst 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 buttonconst 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`](https://reactjs.org/docs/react-api.html#reactchildren) 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 arrayReact.Children.toArray(children)
// Counts the childrenReact.Children.count(children)
// Makes sure there's only one childReact.Children.only(children)
// Lets you run map over children without having to worry about if it's an object or notReact.Children.map(children, fn)
// Lets you run forEach over children without having to worry about if it's an object or notReact.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!

### Share

-   [X (fka Twitter)](https://twitter.com/intent/tweet?text=React Children: The misunderstood prop&url=https://www.netlify.com/blog/2020/12/17/react-children-the-misunderstood-prop//)
-   [LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.netlify.com%2Fblog%2F2020%2F12%2F17%2Freact-children-the-misunderstood-prop%2F%2F)
-   [Facebook](https://www.facebook.com/sharer.php?u=https://www.netlify.com/blog/2020/12/17/react-children-the-misunderstood-prop//)
-   [Bluesky](https://bsky.app/intent/compose?text=React Children: The misunderstood prop+https://www.netlify.com/blog/2020/12/17/react-children-the-misunderstood-prop//)

* * *

### Tags

-   [blogvent](/blog/tags/blogvent/)
-   [React](/blog/tags/react/)
-   [Next.js](/blog/tags/next.js/)
-   [Gatsby](/blog/tags/gatsby/)

## Keep reading

![](/images/blog-fallback-thumbnail.svg)

Guides & Tutorials December 3, 2020

[

### What is React Fast Refresh?

](/blog/2020/12/03/what-is-react-fast-refresh/)

-   ![Profile picture of Cassidy Williams](/_astro/a62099fab0f946e063c4b84ff4b4d9c94f9aa7a5-400x400_ZdakPa.webp)
    
    Cassidy Williams
    

![](/images/blog-fallback-thumbnail.svg)

Guides & Tutorials December 5, 2020

[

### Building a custom React media query hook for more responsive apps

](/blog/2020/12/05/building-a-custom-react-media-query-hook-for-more-responsive-apps/)

-   ![Profile picture of Cassidy Williams](/_astro/a62099fab0f946e063c4b84ff4b4d9c94f9aa7a5-400x400_ZdakPa.webp)
    
    Cassidy Williams
    

## Recent posts

News & Announcements July 14, 2026

[

### More headroom, a lower per-credit rate, and a bill you can predict: introducing new Pro plan tiers

](/blog/new-pro-plan-tiers)

-   ![Profile picture of Gehrig Kunz](/_astro/b4e9f58d914d1334ea70d53ea55a1f26b26f1445-512x512_17SwOI.webp)
    
    Gehrig Kunz
    

News & Announcements July 13, 2026

[

### Netlify inside of Claude Design

](/blog/netlify-inside-of-claude-design)

-   ![Profile picture of Sean Roberts](/_astro/bbf2243f8171dbddd80ab2103622106cef84d125-512x512_Z1d2LKE.webp)
    
    Sean Roberts
    

News & Announcements June 25, 2026

[

### Netlify Functions, designed for Agent Experience

](/blog/netlify-functions-designed-for-agent-experience)

-   ![Profile picture of Eduardo Bouças](/_astro/52958f21e8450baf6d8e60302341a984e220c0cd-512x512_13VDlu.webp)
    
    Eduardo Bouças
    

![](/_astro/3f255b372fa958df35802666ee33b4609b2d71bd-1200x1586_1VtE2D.webp)

### How do the best dev and marketing teams work together?

[Access the report](https://www.netlify.com/reports/2024-leadership-trend-report/access/)