Educative Answers – Trusted Answers to Developer Questions

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.