Pass a Component as props in React

avatar

Borislav Hadzhiev

Last updated: Apr 21, 2022

banner

Photo from Unsplash

Pass a Component as props in React #

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
function Center({children}) { return ( <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', }} > {children} </div> ); } export default function App() { const CustomHeading = () => { return <h2>Hello world</h2>; }; // 👇️ pass children to the Center component return ( <div> <Center> <CustomHeading /> </Center> </div> ); }

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 like we did in the Center component.

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

App.js
// 👇️ 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('button clicked')}>Click</button>; }; // 👇️ pass button as props to the Wrapper component return ( <div> <Wrapper button={Button} /> </div> ); }

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.

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

App.js
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('button clicked')}>{text}</button> ); }; return ( <div> <Wrapper button={<Button text="Some button text" />} /> </div> ); }

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
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> ); }

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

When passing components as props, be mindful about 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}.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.