How to embed two or more components into one in React

In React, the component-based architecture allows us to create reusable and modular UI elements. Embedding two or more React components into one is the process of combining multiple smaller components into a single parent component. This allows you to create a higher-level component that encapsulates the functionality and rendering of its child components. By embedding multiple components into one, you can create more modular and reusable code structures.

Visualization of embedded components

Creating the parent component

To embed multiple components into one, we start by creating a parent component that serves as the container for the child components. This parent component will render the child components as its children.

import React from 'react';

const ParentComponent = () => {
  return (
    <div>
      {/* Add child components here */}
    </div>
  );
};

export default ParentComponent;

ParentComponent.js

Child components

Let's create three sample child components, ChildComponent1 , ChildComponent2, and ChildComponent3 to illustrate how they can be embedded into the parent component.

import React from 'react';

const ChildComponent1 = () => {
  return <p>Child Component 1</p>;
};

const ChildComponent2 = () => {
  return <p>Child Component 2</p>;
};

const ChildComponent3 = () => {
  return <p>Child Component 3</p>;
};

export { ChildComponent1, ChildComponent2, ChildComponent3 };

In this example, ChildComponent1, ChildComponent2 and ChildComponent3 are simple React functional components that return JSX elements. You can create additional child components based on your requirements.

Embedding child components

Now, let's embed the child components into the parent component.

import React from 'react';

const ParentComponent = () => {
  return (
    <div>
      <ChildComponent1 />
      <ChildComponent2 />
      {/* Add more child components here */}
    </div>
  );
};

export default ParentComponent;

You can add as many child components as needed by including them within the <div> tags.

Implementation

To utilize the parent and child components, import the ParentComponent and the child components into your main application component and render the ParentComponent within it.

import React from 'react';
import ParentComponent from './ParentComponent';

const App = () => {
  return (
    <div>
      <h1>Embedding Components</h1>
      <ParentComponent />
    </div>
  );
};

export default App;

In this example, the App component renders the ParentComponent within a <div>. You can include any additional content or components before or after the ParentComponent as needed.

Output

Conclusion

Embedding multiple components into one in React is a powerful technique that enhances reusability and modularity. By creating a parent component and rendering child components within it, we can encapsulate related functionality and create more organized code structures.

Relevant Answers

Explore Courses

Free Resources