Pass a Component as a Prop in React

As a developer, I was working on a React project where I wanted to reuse the same layout but swap out different components depending on the page. The issue was… I didn’t want to duplicate code or hard-code components into the layout. That’s when I discovered a trick: passing a component as a prop in React.

At first, it felt a little confusing. I’ve been a developer, and I know how important clean, reusable code is. Once I figured this out, it completely changed how I structure my React apps.

In this tutorial, I’ll show you different ways to pass a component as a prop in React. I’ll use simple, real-world examples that you can try right away.

Methods to Pass a Component as a Prop

Before we dive into the methods, let’s quickly understand why this matters.

• Reusability: You can create one parent component and swap child components easily.
• Flexibility: Your layout doesn’t need to know in advance which component it will render.
• Cleaner Code: Avoids repeating the same structure across multiple files.

Think of it like this: in Python, we often pass functions or objects into other functions for flexibility. React lets us do something very similar with components.

Method 1 – Pass JSX Directly via Children

The simplest way is to use the built-in children prop. Everything you place between a component’s opening and closing tags automatically becomes its children.

Here’s an example:

function Layout({ children }) {
  return (
    <div style={{ border: "2px solid black", padding: "20px" }}>
      <h2>Dashboard Layout</h2>
      {children}
    </div>
  );
}

function Profile() {
  return <p>User Profile Information</p>;
}

export default function App() {
  return (
    <Layout>
      <Profile />
    </Layout>
  );
}

You can see the output in the screenshot below.

When I run this, the Profile component is passed as a child to Layout. This is great when you want to wrap content in a reusable layout.

Method 2 – Pass a Component Type as a Prop

Sometimes I don’t want to pass JSX directly. Instead, I want to pass the component itself and let the parent decide how and when to render it.

Here’s how:

function Layout({ Component }) {
  return (
    <div style={{ border: "2px solid blue", padding: "20px" }}>
      <h2>Admin Layout</h2>
      <Component />
    </div>
  );
}

function Reports() {
  return <p>Monthly Reports for USA Branch</p>;
}

export default function App() {
  return <Layout Component={Reports} />;
}

You can see the output in the screenshot below.

Notice how I passed Reports without < >. Inside Layout, I render it as <Component />. This method gives me more control. For example, I can conditionally render the component based on user roles.

Method 3 – Pass Render Functions

Another approach I use is passing a function that returns JSX. This is especially useful when I need to pass props down to the child.

function Layout({ renderContent }) {
  return (
    <div style={{ border: "2px solid green", padding: "20px" }}>
      <h2>Employee Dashboard</h2>
      {renderContent()}
    </div>
  );
}

function Employee({ name }) {
  return <p>Welcome, {name}!</p>;
}

export default function App() {
  return (
    <Layout renderContent={() => <Employee name="John from New York" />} />
  );
}

You can see the output in the screenshot below.

Here, the Layout doesn’t know anything about employees. It just calls renderContent(). This keeps the logic flexible.

Method 4 – Use React.ElementType

When I’m working on larger projects, I often use TypeScript or strict prop typing. In such cases, I prefer using React.ElementType to define the prop type for components.

import React from "react";

type LayoutProps = {
  Component: React.ElementType;
};

function Layout({ Component }: LayoutProps) {
  return (
    <div style={{ border: "2px solid red", padding: "20px" }}>
      <h2>Analytics Layout</h2>
      <Component />
    </div>
  );
}

function Analytics() {
  return <p>Data Analysis for California Branch</p>;
}

export default function App() {
  return <Layout Component={Analytics} />;
}

This method makes my code safer because TypeScript will warn me if I pass something that isn’t a valid React component.

Best Practices I Follow

Over the years, I’ve learned a few best practices when passing components as props:

• Use children for simple wrapping layouts.
• Use component props when you want flexibility and control.
• Use render functions when you need to pass extra props dynamically.
• Use TypeScript (or PropTypes) to prevent errors in large apps.

I started using it to clean up my layouts, and now I use it almost everywhere in my React projects. Whether you’re building dashboards, admin panels, or USA-specific reporting tools, this approach will save you time and make your components more reusable.

Passing a component as a prop in React is one of those techniques that feels tricky at first but becomes second nature once you try it.

You may also read other React posts:

• State in React JS
• Props in React JS
• React Cancel Button
• Create Tables in React Using react-data-table-component

Bijay Kumar

I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.

enjoysharepoint.com/