How to pass a react component into another to transclude the first component’s content?

Namachila October 13, 2025

0 0 1 minute read

There are two ways by which we can pass a react component into another component.

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.

1. Using this.props.children

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

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

 {this.props.children}

First Approach: App.js Open App.js file from src folder and edit it as:

Javascript

import React from "react"; 
  
class App extends React.Component { 
   
  render() { 
    return ( 
      <div className="App"> 
        <h1>App</h1>  
        <First > 
         <Second/> 
        </First> 
      </div> 
    ); 
  } 
} 
export default App 
  
  
class First extends React.Component { 
   
  render() { 
    return <div> 
        <h2> First Component</h2> 
        {this.props.children} 
    </div>; 
  } 
} 
  
class Second extends React.Component{ 
  
    render() { 
        return <div> 
            <h3> Second Component</h3> 
        </div> 
    } 
} 

2. Pass as props to another component

 <First secondcomp= {<Second/>} >

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

{this.props.second}

Second Approach: App.js Open App.js file from src folder and edit it as:

Javascript

import React from "react"; 
  
  
class App extends React.Component { 
   
  render() { 
    return ( 
      <div className="App"> 
        <h1>App</h1>  
        <First secondcomp = {<Second/>} > 
           
        </First> 
      </div> 
    ); 
  } 
} 
export default App 
class First extends React.Component { 
   
  render() { 
    return <div> 
        <h2> First Component</h2> 
        {this.props.secondcomp} 
    </div>; 
  } 
} 
class Second extends React.Component{ 
  
    render() { 
        return <div> 
            <h3> Second Component</h3> 
        </div> 
    } 
} 

Output: Both the approach will give the same output

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!