How to pass a react component into another to transclude the first component’s content?
Last Updated :
01 Feb, 2021
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...