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
