Golang React JS Technology Blog

How to render one component in another component in React JS?

In React content rendered by a component can contain other components also, this features allow us to create more complex applications.

Create React App

Type the following command to create a new react app:

npx create-react-app demo

Now, go to the project folder:

cd demo

Create new Header component and type out the below code into Header.js

src\components\Header.js

Example

import React, { Component } from 'react';
 
class Header extends Component {
  render() {
    return (
      <div>
        This is header component.
      </div>
    );
  }
}
 
export default Header;

Create new Footer component and type out the below code into Footer.js

src\components\Footer.js

Example

import React, { Component } from 'react';
 
class Footer extends Component {
  render() {
    return (
      <div>
        This is Footer component.
      </div>        
    );
  }
}
 
export default Footer;

Now, update default App.js with below code snippet

src\App.js

Example

import React, { Component } from 'react';
import Header from './components/Header';
import Footer from './components/Footer';
 
class App extends Component {
  render() {
    return (
      <div>
        <Header />
        <Footer />
      </div>
    );
  }
}
 
export default App;

When one component uses another like this, a parent-child relationship is formed. In above example, the App component is the parent to the Header and Footer components, and the Header and Footer components are the child of the App component.

Most Helpful This Week
Using this keyword access component properties and methods React JSX React JS onClick event handler How to get a clicked HTML element in React? How to use createElement in React JS? React JS Blog CRUD operation How to use React-Bootstrap component? React Static Website with Material UI theme React Props React Components