How to use one component to render many HTML fragments in React

Before going into the details of using HTMLHyper Text Markup Language fragments in React components, let’s first understand what HTML fragments are. An HTML fragment is a portion of the HTML structure. In other words, it lacks the complete HTML structure and is often used to increase the reusability of the code.

Below is a simple example of an HTML fragment. It represents a simple list of employee names.

How to use multiple HTML fragments in one React component

To render multiple HTML fragments in one React component, you can use:

The <React.Fragment/> command.
A single <div></div> conatainer. This method is rarely used as using a single <div></div> container decreases code readability and maintainability.

Example

Let’s take a use case where we want to render a list of employee names, employee IDs, and employee contact numbers under respective headings on a single React page. To do so, we’ll create three HTML fragments in React. As the ideal approach is to create separate components for each fragment, we’ll create a components folder in the src folder of our React application.

EmployeeNames component

Create a EmployeeNames.js file in src/components folder.

import React from 'react';
import EmployeeNames from './components/EmployeeNames';
import EmployeeIDs from './components/EmployeeIDs';
import EmployeeContacts from './components/EmployeeContacts';
export default function App()
{
  return(
    <React.Fragment>
    <div>
        <h1>Employee Names: </h1>
        <EmployeeNames/>
    </div>
    <div>
        <h1>Employee IDs:</h1>
        <EmployeeIDs/>
    </div>
    <div>
        <h1>Employee Contact Numbers:</h1>
        <EmployeeContacts/>
    </div>
      
   </React.Fragment>
  );
};

import React from 'react';
const EmployeeNames = () => {
  return (
   <ul>
    <li>Alina</li>
    <li>Mahira</li>
    <li>Mustafa</li>
    <li>Hamid</li>
   </ul>
  );
};
const EmployeeIDs = () => {
  return (
   <ul>
    <li>0900</li>
    <li>0913</li>
    <li>1921</li>
    <li>2003</li>
   </ul>
  );
};
const EmployeeContacts = () => {
  return (
   <ul>
   <li>090078601</li>
    <li>19134532</li>
    <li>59215423</li>
    <li>21037373</li>
   </ul>
  );
};
export default function App()
{
  return(
    <React.Fragment>
    <div>
        <h1>Employee Names: </h1>
        <EmployeeNames/>
    </div>
    <div>
        <h1>Employee IDs:</h1>
        <EmployeeIDs/>
    </div>
    <div>
        <h1>Employee Contact Numbers:</h1>
        <EmployeeContacts/>
    </div>
      
   </React.Fragment>
  );
};

import React from 'react';
import EmployeeNames from './components/EmployeeNames';
import EmployeeIDs from './components/EmployeeIDs';
import EmployeeContacts from './components/EmployeeContacts';

export default function App()
{
  return(
    <React.Fragment>
    <div>
        <h1>Employee Names: </h1>
        <EmployeeNames/>
    </div>

    <div>
        <h1>Employee IDs:</h1>
        <EmployeeIDs/>
    </div>

    <div>
        <h1>Employee Contacts Numbers:</h1>
        <EmployeeContacts/>
    </div>
      
   </React.Fragment>

  );
};

Code to render mutliple HTML fragments in one React component

Explanation

In src/components/EmployeeNames.js folder:
- Lines 2–11: We add an HTML Fragment, EmployeeNames, to display the names of all the employees. The <ul></ul> tag in this code represents an unordered list.
In src/components/EmployeeIDs.js folder:
- Lines 2–11: We add a component, EmployeeIDs, to display the IDs of all the employees. The <ul></ul> tag in this code is to create an unordered list.
In src/components/EmployeeContacts.js folder:
- Lines 2–11: A component, EmployeeContacts, to display the contact numbers of all the employees. The <ul></ul> tag in this code is to create an unordered list.
In src/App.js folder:
- Lines 2–4: All the components, i.e., EmployeeNames, EmployeeContacts, and EmployeeIDs, are imported so that they can be used inside the App.js file.
- Line 9: It opens the React.Fragment tag. All the div containers are placed inside it, and the tag closes at line 25. The <React.Fragment></React.Fragment> tag is used to render multiple HTML fragments in one React component. Without using this tag, React will show an error.
- Lines 10–13: A <div></div> container is created that gives <h1></h1> heading for Employee Names. After heading, in line 12, the EmployeeNames component is rendered.
- Lines 15–18: Another <div></div> container is created that gives <h1></h1> heading for Employee IDs. After heading, in line 17, the EmployeeIDs component is rendered.
- Lines 20–23: Another <div></div> container is created that gives <h1></h1> heading for Employee Contacts. After heading, in line 22, the EmployeeContacts component is rendered.

Conclusion

To render multiple HTML fragments in one React component, we can either place all our div containers in a single <div></div> or we can go for <React.Fragment/> tag. We advise using the <React.Fragment/> tag as it provides the wanted structure to the code. If we place all the code in one <div></div> container, the <div></div> container will act as a parent container, and all its CSS properties will be applied to the entire code placed inside it. It will also increase the difficulty level of the code.

How to use one component to render many HTML fragments in React

How to use multiple HTML fragments in one React component

Example

EmployeeNames component

EmployeeIDs component

EmployeeContacts component

Importing all HTML fragments in one React component

Code

Explanation

Conclusion