How to Pass a Component as props in React

# Pass a Component as props using the `children` prop

You can pass a component as props in React by using the built-in children prop.

All elements you pass between the opening and closing tags of a component get assigned to the children prop.

App.js

Copied!
function Center({children}) {
  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      {children}
    </div>
  );
}

export default function App() {
  const CustomHeading = () => {
    return <h2>bobbyhadz.com</h2>;
  };

  // 👇️ Pass children to the Center component
  return (
    <div>
      <Center>
        <CustomHeading />
      </Center>
    </div>
  );
}

pass component as prop using children

The code for this article is available on GitHub

The example shows how everything we pass between the opening and closing tags of a component gets assigned to the children prop in React.

The component can destructure the children property from its props object and render it as we did in the Center component.

# Directly passing a component as a prop to a child element

Alternatively, you can directly pass a component as a prop to a child component.

App.js

Copied!
// 👇️ Rename button prop to Button (capital first letter)
function Wrapper({button: Button}) {
  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <Button />
    </div>
  );
}

export default function App() {
  const Button = () => {
    return <button onClick={() => console.log('bobbyhadz.com')}>Click</button>;
  };

  // 👇️ Pass button as props to the Wrapper component
  return (
    <div>
      <Wrapper button={Button} />
    </div>
  );
}

pass component as prop directly

The code for this article is available on GitHub

We passed the Button component as props to the Wrapper component.

The Wrapper component had to rename the prop from button to Button (capital first letter), because all component names must start with a capital letter.

If the Button component took props, we could pass them when using it in our Wrapper component.

If you need to pass an object as props to a component, click on the link and follow the instructions.

# Pass a component with props as a prop

Alternatively, you can pass the component as a prop to a child component and directly set its props.

App.js

Copied!
function Wrapper({button}) {
  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      {button}
    </div>
  );
}

export default function App() {
  const Button = ({text}) => {
    return (
      <button onClick={() => console.log('bobbyhadz.com')}>{text}</button>
    );
  };

  return (
    <div>
      <Wrapper button={<Button text="Button text" />} />
    </div>
  );
}

pass component with props

The code for this article is available on GitHub

In this example, we directly set the props of the Button component when passing it to the Wrapper component.

Note that we are not passing the actual component function, instead, we are passing the return value of the Button component.

This means that we have to use the prop as {button}, instead of <Button/> in our Wrapper component.

You can also mix and match. Here is an example of passing a Button component that takes a children prop and renders its children.

App.js

Copied!
function Wrapper({button: Button}) {
  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <Button>
        <h2>Some text here</h2>
      </Button>
    </div>
  );
}

export default function App() {
  const Button = ({children}) => {
    return (
      <button onClick={() => console.log('button clicked')}>
        {children}
      </button>
    );
  };

  return (
    <div>
      <Wrapper button={Button} />
    </div>
  );
}

The code for this article is available on GitHub

Whatever we pass between the opening and closing tags of the Button component will get rendered.

When passing components as props, be mindful of when you pass the actual function component, e.g. button={Button} vs when you pass what the function component returns, e.g. button={<Button text="Some button text" />}.

This is important because when you pass the actual function component, it can be used as <Button />. On the other hand, if you pass the return value of the function, it has to be used as {button}.

If you need to pass an array as a prop, click on the link and follow the instructions.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

How to Pass a Component as props in React

# Pass a Component as props using the children prop

# Directly passing a component as a prop to a child element

# Pass a component with props as a prop

# Additional Resources

Borislav Hadzhiev

# Pass a Component as props using the `children` prop