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
React JS update Div content on click React Static Website with Material UI theme How to render raw HTML content in React JS? React Props React Components Embed JavaScript Expressions in JSX