Creating Compositional Components in React With this.props.children

If you’re a newcomer to React, you may have seen this.props.children in various tutorials. Sometimes its purpose isn’t clear or you may have thought, “I could have done it a different way.” Let’s find out the unique perks of using children in React so we can feel more confident about when we should be using it.

Basic Usage

Imagine that we need to build a <PrimaryButton/> component for all of the call-to-action buttons in our app.

class PrimaryButton extends React.Component {
  render() {
    return (
      <button onClick={this.props.onClick}>
        {this.props.text}
      </button>
    )
  }
}

//usage
<PrimaryButton text="Getting Started" onClick={this.somehandler} />

Your design team wants to add a small feature: include an icon before the words “Getting Started”. This is where things get interesting…

//refactor
class PrimaryButton extends React.Component {
  render() {
    return (
      <button onClick={this.props.onClick}>
        {this.props.icon}{this.props.text}
      </button>
    )
  }
}

//usage
<PrimaryButton
  icon={IconFile}
  text="Getting Started"
  onClick={this.somehandler}
/>

While this solution is certainly reasonable it creates a tight interface with <PrimaryButton/> because you have to be explicit about the stuff in the button. This can lead to brittle components that easily break when you need to introduce new features. But aha! There’s a more robust solution!

//refactor
class PrimaryButton extends React.Component {
  render() {
    return (
      <!--
      <button onClick={this.props.onClick}>
        {this.props.icon}{this.props.text}
      </button>
      -->
      <button onClick={this.props.onClick}>
        {this.props.children}
      </button>
    )
  }
}

//usage
<PrimaryButton onClick={this.somehandler}>
  <IconFile/> Getting Started
</PrimaryButton>

Notice how unopinionated <PrimaryButton/> is about its content! You could put any valid HTML tags in there, image files, React components… egads you could even reverse the order of the text and icon!

But what’s this weird this.props.children?

this.props.weird

When I first began using React one of the biggest deterrents from embracing this.props.children was because of the odd way it’s used. Wrapping a React component around other React components? Assume all these components are gonna get implicitly passed to the parent? Using a reserved namespace in props to access the… “children”? Super weird.

But just like how weird JSX was initially, once you practice using this.props.children more and get used to the syntax… it’ll become as indispensable as JSX! Identifying places to use parent-children relationships will become more intuitive to you.

Wrapping Up

In the real-world, a React app will have a blend of these wrapper components (the React team calls them compositional components since you compose more sophisticated React components from simpler ones), as well as components that don’t wrap over any React components (see my first code snippet). That’s perfectly normal. As you discover more about your product you’ll be able to identify more redundant UI/UX that can be turned into compositional components.

For example, some good candidates to refactor into composition components are: modals, hovering/clicked styling, notification snackbars, deck slider, etc. It’s really up to your discretion to be as rigorous or loose with this compositional style. The more a React component relies on arbitrary content inside it and some common denominator of UI functionality that’s used app-wide… the more you’ll benefit from using this parent-children pattern.

👉  Checkout the demo on Codepen. Notice how sophisticated features are incrementally layered-on using various composed components.