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. 

 <ul>
    <li>Alina</li>
    <li>Mahira</li>
    <li>Mustafa</li>
    <li>Hamid</li>
   </ul>

Here is another example of two HTML fragments in React:

const htmlFragment1 = '<p>This is HTML fragment 1.</p>';
const htmlFragment2 = '<p>This is HTML fragment 2.</p>';

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';
const EmployeeNames = () => {
  return (
   <ul>
    <li>Alina</li>
    <li>Mahira</li>
    <li>Mustafa</li>
    <li>Hamid</li>
   </ul>
  );
};
export default EmployeeNames;

EmployeeIDs component

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

import React from 'react';
const EmployeeIDs = () => {
  return (
   <ul>
    <li>0900</li>
    <li>0913</li>
    <li>1921</li>
    <li>2003</li>
   </ul>
  );
};
export default EmployeeIDs;

EmployeeContacts component

For employees’ contact numbers, create a separate EmployeeContacts.js file in src/components folder.

import React from 'react';
const EmployeeContacts = () => {
  return (
   <ul>
   <li>090078601</li>
    <li>19134532</li>
    <li>59215423</li>
    <li>21037373</li>
   </ul>
  );
};
export default EmployeeContacts;

Importing all HTML fragments in one React component

We’ll import all the components in our App.js file. Now, to render all the components inside one React component, in different <div></div> containers we’ll use <React.Fragment></React.Fragment>. You can replace <React.Fragment></React.Fragment> with a short-hand syntax, i.e., <></>.

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>
  );
};

Note: If you are using a single <div></div> container, you don’t need to use <React.Fragment></React.Fragment> or <></>. You can render all the HTML fragments in a single <div></div> container.

If the HTML fragments are not long, we should create all fragments in a single file. 

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>
  );
};

Code

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.

Free Resources

Copyright ©2026 Educative, Inc. All rights reserved