Child or Prop?

Child or prop? Puppy or bagel?

Image: Imgur

Once we get past the amazing likeness of puppies and bagels: let’s talk about the similarities and differences between React children and props.

I initially didn’t understand the difference. Why have both, if they’re just two different ways to pass around information? When should I use props, and when should I use children?

Parents vs. Owners

The key to understanding the distinction is understanding the difference between the owner-ownee relationship and the parent-child relationship.

The parent-child relationship is a familiar one. For example, a classic DOM layout:

1
2
3
4
<ul id="parent">
    <li id="child1">Child 1</li>
    <li id="child2">Child 2<li>
</ul>

The list elements are children of the unordered list. They are literally nested inside the <ul>. In React, too, a child component is literally nested inside the parent: <Parent> <Child /> </Parent>

The owner-ownee relationship is a little different. In Facebook’s React docs the definition is this:

An owner is the component that sets the props of other components. More formally, if a component X is created in component Y’s render( ) method, it is said that X is owned by Y.

For example:

1
2
3
4
5
6
7
8
9
class Engineer extends React.Component {
    render() {
        return(
            <pre>
                <CodeSnippet language={this.props.language} codeSmell={this.props.smell} />
            </pre>
        );
    }
}

Here, the CodeSnippet is owned by the Engineer, who renders it and is reponsible for its props. (Let that be a lesson to all of us.)

A parent is not the same as an owner. In the above example, pre is the parent of CodeSnippet, because a CodeSnippet is nested inside of a pre tag. But pre is not the owner.

How to pass in children

This was perhaps the source of my original confusion about children vs. props: children are actually props. But they are a special kind of prop, with their own set of utilities. The special prop is this.props.children.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class HasManyChildren extends React.Component {
  render() {
      return (
        <div id="parent">
            {this.props.children}
        </div>
      )
  }
}

ReactDOM.render(
  <HasManyChildren>
        <Child value="1" />
        <Child value="2" />
  </HasManyChildren>,
    document.getElementById('container')
);

Two children are being passed into the parent HasManyChildren – and can be accessed with this.props.children.

Which one??

So when to use children and when to use regular props as a way to pass down information? The best answer I’ve heard so far:

children are for dynamic content

Just like with a Ruby yield, you can pass in any children to a component and it can access them with {this.props.children}. For example, maybe you want to render a Ninja component when the user hits the /ninja route, but render a Pirate component if the user lands on /pirate. You can use this.props.children to render either set of components in the React Router.

1
2
3
4
5
6
7
8
9
10
11
12
13
// in routes
<Route path="ninja" component={NinjaComponent}>
<Route path="pirate" component={PirateComponent}>

// in app.js
render() {
    return (
      <div>
        <h1> Pirate or Ninja? </h1>
        {this.props.children} // renders either PirateComponent or NinjaComponent
      </div>
    );
}
props are like arguments that must be passed in

Props, however, are the pieces required for components to render. Just like a method’s arguments are required for a method call, a component must receive props before it can mount. If a Pirate component must have a priate flag to be rendered, you’d better pass one in, matey:

1
<Pirate pirateFlag={this.props.pirateFlag} shipName={this.props.shipName} />

Sources