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

Bijay Kumar is an experienced Python and AI professional who enjoys helping developers learn modern technologies through practical tutorials and examples. His expertise includes Python development, Machine Learning, Artificial Intelligence, automation, and data analysis using libraries like Pandas, NumPy, TensorFlow, Matplotlib, SciPy, and Scikit-Learn. At PythonGuides.com, he shares in-depth guides designed for both beginners and experienced developers. More about us.

enjoysharepoint.com/