Articles → REACT.JS → Add a component inside another component in react.js

Add a component inside another component in react.js






Example






import React, { Component } from 'react';
import ReactDOM from 'react-dom'




class ChildComponent extends React.Component {
    render() {
        return <h2>This is child component</h2>;
    }
}

class ParentComponent extends React.Component {
    render() {
        return (
            <div>
                <h1>This is parent component</h1>
                <ChildComponent />
            </div>
        );
    }
}

ReactDOM.render(<ParentComponent />, document.getElementById('root'));




Picture showing the adding a component inside another component in react.js

Click to Enlarge


How to add components from another file?






import React, { Component } from 'react';
import ReactDOM from 'react-dom'




class ChildComponent extends React.Component {
    render() {
        return <h2>This is child component</h2>;
    }
}

export default ChildComponent




import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import ChildComponent from './gyan.js';




class ParentComponent extends React.Component {
    render() {
        return (
            <div>
                <h1>This is parent component</h1>
                <ChildComponent />
            </div>
        );
    }
}

ReactDOM.render(<ParentComponent />, document.getElementById('root'));




Picture showing the adding a component inside another component in react.js

Click to Enlarge


Posted By  -  Karan Gupta
 
Posted On  -  Saturday, August 7, 2021

Query/Feedback


Your Email Id  
 
Subject 
 
Query/FeedbackCharacters remaining 250