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
Working with Forms, Inputs and onChange Events in ReactJs How to create simple React Router to navigate multiple pages? Embed JavaScript Expressions in JSX What is state in React? React Elements How to handle events using expressions inside JSX?