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:

constButton=()=>(<button>    I am a button.</button>)

If you want to pass things to this button, you would use a prop.

// our buttonconstButton=({color})=>(<buttonclassName={color}>    I am a button</button>)// somewhere else<Buttoncolor="red"/>

If you want to make our button say more than just “I am a button,” you can passchildren to it.

// our buttonconstButton=({color,children})=>(<buttonclassName={color}>{children}</button>)// somewhere else<Buttoncolor="red">Iamstillabutton</Button>

By passingchildren in this way, you are passing it to the componentby position. Now, if you notice that little header there of this section, I callchildren a prop. Did you know that it can be passed as a named prop, too?

// turn this<Buttoncolor="red">  I am still a button</Button>// into this<Buttoncolor="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 buttonconstButton=({color,children})=>{console.log(children)return(<buttonclassName={color}>      please, my{children}      are starving</button>)}// somewhere else<Buttoncolor="red"><h1>Oh</h1></Button>

Logged here would be an object that looks something like,{type: "h1", key: null, ref: null, props: Object, ...}. Okay. Sochildren is an object. But what if we change up the children in the button so there’s more of them?

<Buttoncolor="red"><h1>Oh</h1><h2>My</h2><h3>Goodness</h3></Button>

Logged in our terminal would be[Object, Object, Object], becausechildren is an array.

Gosh, make up your mind, children!

The data structure forchildren 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 usechildren 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!