How to Pass Components Via Props in React

Props allow us to pass data into components so we can reuse them and build interactive apps in React.

In this guide, you will learn about one of the advanced use cases: passing components as props. This way, you can reuse even more of your code and build dynamic components with React.

There are several ways to pass components via props. Let’s start with the simplest approach.

Pass components as props.

You can pass components the same way you’d pass any data in React. Needless to say, you will need curly braces to set component values for props.

Let’s look at an example:

function App() {
  return (
    <div className="App">
      <Header text={<Text />} />
    </div>
  );
}
function Header({ text }) {
  return <div>{text}</div>;
}

The Header component will render the Text component.

Make sure that the name of the component is capitalized. Once passed, the child (in this case Header) component can access the component via props.

You can even set props on the component you are passing via props. Here’s a live example from CodeSandbox.

In this example, we pass color prop to customize the color of the text.

This is a fairly easy and readable way to pass components via props.

Now, let’s explore another, arguably better way to pass multiple components via props.

Pass component(s) via children prop

Let’s say you have a container and want to change its content depending on URL, user input, or any other factor.

children interface allows you to dynamically pass it a certain set of components and elements.

Syntax for using children prop is straightforward – simply include components between the opening and closing tags of the component.

function App() {
  return (
    <div>
      <Header>
        <Text />
        <Button />
      </Header>
    </div>
  );
}
function Header({ children }) {
  return <div>{children}</div>;
}

function Text(props) {
  return <h1 style={{ color: props.color }}>Hello World</h1>;
}

function Button(props) {
  return <button>Click</button>;
}

The Header component will automatically display all components passed between its opening and closing tags when it is invoked.

Note: In the Header component, we use destructuring syntax to access children property of props. Normally, you would access it on props.children.

Which is a better way to pass components as props?

There are advantages and disadvantages to passing components directly or via children prop.

The children prop is simpler and more readable if you have multiple components or complex code. Its disadvantage is that all components passed in via children are lumped together. You can’t break up children prop and put various groups at different places in your child component.

Passing components directly via props is better, as you can access individual components and invoke them at different places in your child component.

If you’d like to learn more, head to my blog, where I publish dozens of React guides like this one.