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

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