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