How to Pass a React Component into Another to Transclude Content?

Transclusion refers to Passing a react component's content to another component. Passing component to another in react enable use to render the data inside other component. This content can be rendered as component's children.

Approach

To pass a react component to another in react we will pass it as the children of that component. It will be accessible using props.children and we can render it as required. We can also pass the component as a prop to render its content.

Creating React Application

Before proceeding to the approach you have to create a React app.

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder, i.e., foldername, move to it using the following command:

cd foldername

Project Structure:

It will look like the following.

Approch 1: Using prop.children

To transclude the content we can enclose a component inside other component as given below

 <First >
           <Second></Second>
 </First>

The content will be accessible with the help of props and will be rendered as children

in this way the component First can access the Second component using this.props.children attribute.

 {props.children}

Example: This example demonstrate content transclusion by rendering the component as a child by enclosing it with other component.

// App.js

import React from "react";

const App = () => {
	return (
		<div className="App">
			<h1>App</h1>
			<First>
				<Second />
			</First>
		</div>
	);
};

const First = (props) => {
	return (
		<div>
			<h2>First Component</h2>
			{props.children}
		</div>
	);
};

const Second = () => {
	return (
		<div>
			<h3>Second Component</h3>
		</div>
	);
};

export default App;

Approach 2: Passing Componnet as Prop

We can pass the react component as prop into another component to transclude the content.

 <First secondcomp= {<Second/>} >

so the First component can access the component using props.secondcomp attribute.

{props.second}

Example: This example passes a react component as prop to render the content into another component.

// Filename

import React from "react";

const App = () => {
	return (
		<div className="App">
			<h1>App</h1>
			<First secondcomp={<Second />} />
		</div>
	);
};

const First = (props) => {
	return (
		<div>
			<h2>First Component</h2>
			{props.secondcomp}
		</div>
	);
};

const Second = () => {
	return (
		<div>
			<h3>Second Component</h3>
		</div>
	);
};

export default App;

Output: Both the approach will give the same output