Articles → REACT.JS → Add A Component Inside Another Component In React.Js

Add A Component Inside Another Component In React.Js

In this article, we will add a component inside another component in react.js.

Example

In this example, we will have 2 components i.e., parent and child components. We will add a child component inside the parent component.

Here is the code

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'));

Here is the output

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

Click to Enlarge

How To Add Components From Another File?

In the last example, we had parent and child components in the same file. But we can also create different files for parent and child components.

For this example, we are creating a file gyan.js that contains the following code.

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

The above file contains the code for the child component. Now create another file index.js that contains the parent component as well as the child component.

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'));

Now run the react code and you will get the following output.

Click to Enlarge

Posted By -	Karan Gupta

Posted On -	Saturday, August 7, 2021

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**