Rendering Multiple Elements in React JS means displaying multiple HTML elements, JSX elements, or React components together in a user interface. React allows developers to combine headings, paragraphs, images, buttons, lists, and reusable components to create complete web pages.
To render multiple elements in React, developers commonly use a parent element, React Fragments, arrays of JSX elements, reusable components, and JavaScript's map() method. Understanding these techniques helps create clean, organized, and reusable React applications.
Rendering multiple elements means displaying more than one element within a React component. For example, a page might contain a heading, a paragraph, an image, and a button.
Example:
function App() {
return (
<div>
<h1>Welcome to React JS</h1>
<p>Learn how to build web applications.</p>
<button>Get Started</button>
</div>
);
}
export default App;Explanation:
div is the parent element.h1 displays the main heading.p displays a paragraph.button displays an interactive button.The component returns one root JSX element, which contains multiple child elements.
Most real-world interfaces require multiple elements to work together. Rendering multiple elements makes it possible to organize content into meaningful sections.
The simplest way to return multiple JSX elements is to wrap them inside one parent element, such as div, section, main, or article.
Syntax:
function Component() {
return (
<parentElement>
<ElementOne />
<ElementTwo />
<ElementThree />
</parentElement>
);
}Example:
function App() {
return (
<section>
<h1>About Our Academy</h1>
<p>We provide technology training courses.</p>
<a href="https://example.com">Learn More</a>
</section>
);
}Advantages:
Limitation: An extra parent element becomes part of the rendered DOM. This can sometimes affect styling or the structure required by elements such as tables.
A React Fragment groups multiple JSX elements without adding an extra DOM element. Fragments are useful when you need a single JSX root but do not want an additional div or other wrapper in the rendered HTML.
React supports two common Fragment syntaxes: the shorthand syntax and the explicit Fragment component.
The shorthand syntax uses an empty opening and closing tag: <>....
Example:
function App() {
return (
<>
<h1>React JS Training</h1>
<p>Learn React fundamentals.</p>
<button>Explore Course</button>
</>
);
}
export default App;Here, the three elements are grouped together without adding an extra wrapper element to the DOM.
You can import Fragment from React and use it to group multiple elements.
import { Fragment } from "react";
function App() {
return (
<Fragment>
<h1>Welcome</h1>
<p>Learn React step by step.</p>
</Fragment>
);
}
export default App;Important: The shorthand Fragment syntax cannot accept a key prop. When rendering a group of elements inside a list, use the explicit Fragment syntax with a stable key.
React can render arrays containing renderable values, including JSX elements. This can be useful when you prepare a group of elements in a variable and return them from a component.
Example:
function App() {
const elements = [
<h1 key="heading">Welcome to React</h1>,
<p key="description">Learn React concepts.</p>,
<button key="button">Get Started</button>
];
return (
<div>
{elements}
</div>
);
}
export default App;In this example, the array contains three JSX elements, which are rendered inside the parent div. Each element has a distinct key.
Note: When an array represents a collection of similar items, generating the elements from data using map() is usually more maintainable than manually creating an array of JSX elements.
The JavaScript map() method is one of the most common ways to render multiple similar elements in React. It transforms each item in an array into a JSX element.
Syntax:
array.map((item) => (
<element key={item.id}>{item.name}</element>
))Example:
function App() {
const courses = [
{ id: 1, name: "React JS" },
{ id: 2, name: "JavaScript" },
{ id: 3, name: "HTML and CSS" }
];
return (
<div>
<h1>Available Courses</h1>
<ul>
{courses.map((course) => (
<li key={course.id}>{course.name}</li>
))}
</ul>
</div>
);
}
export default App;Explanation:
courses contains an array of course objects.map() processes each course.li element.key={course.id} helps React identify each item.This technique is useful for course lists, product catalogs, menus, employee directories, and other data-driven interfaces.
A key is a special React attribute used to identify elements among their siblings in a rendered collection. Keys help React determine which items have been added, removed, or reordered.
Example:
function StudentList() {
const students = [
{ id: 101, name: "Aarav" },
{ id: 102, name: "Priya" },
{ id: 103, name: "Rohan" }
];
return (
<ul>
{students.map((student) => (
<li key={student.id}>{student.name}</li>
))}
</ul>
);
}Each student has a unique ID, so it can be used as a key.
key is for React and is not passed to the component as an ordinary prop.Incorrect:
{students.map((student) => (
<li>{student.name}</li>
))}Correct:
{students.map((student) => (
<li key={student.id}>{student.name}</li>
))}Instead of writing the same JSX structure repeatedly, you can create a reusable component and render it multiple times.
Example:
function CourseCard({ name, duration }) {
return (
<div className="course-card">
<h2>{name}</h2>
<p>Duration: {duration}</p>
</div>
);
}
function App() {
return (
<main>
<h1>Our Courses</h1>
<CourseCard name="React JS" duration="8 Weeks" />
<CourseCard name="JavaScript" duration="6 Weeks" />
<CourseCard name="HTML and CSS" duration="4 Weeks" />
</main>
);
}
export default App;Here, the CourseCard component is reused three times with different props. Each instance displays different course information.
Advantages:
You can use Fragments to group several component instances without adding an extra DOM wrapper.
function Header() {
return <h1>My Learning Portal</h1>;
}
function Content() {
return <p>Explore our technology courses.</p>;
}
function Footer() {
return <footer>Copyright 2026</footer>;
}
function App() {
return (
<>
<Header />
<Content />
<Footer />
</>
);
}
export default App;The App component renders the Header, Content, and Footer components together using a Fragment.
You can combine multiple elements with conditional expressions to display content only when a condition is satisfied.
Example:
function App() {
const isLoggedIn = true;
return (
<div>
{isLoggedIn ? (
<>
<h1>Welcome Back!</h1>
<p>You are successfully logged in.</p>
<button>Open Dashboard</button>
</>
) : (
<>
<h1>Welcome Guest</h1>
<p>Please sign in to continue.</p>
<button>Login</button>
</>
)}
</div>
);
}When isLoggedIn is true, the first group of elements is rendered. Otherwise, the second group is rendered.
Fragments are useful here because each condition returns multiple sibling elements without introducing an unnecessary wrapper.
The filter() method selects items that meet a condition, while map() transforms the selected items into JSX elements. These methods are often used together to display only relevant data.
Example:
function App() {
const courses = [
{ id: 1, name: "React JS", isAvailable: true },
{ id: 2, name: "Python", isAvailable: false },
{ id: 3, name: "JavaScript", isAvailable: true }
];
const availableCourses = courses.filter(
(course) => course.isAvailable
);
return (
<div>
<h1>Available Courses</h1>
<ul>
{availableCourses.map((course) => (
<li key={course.id}>{course.name}</li>
))}
</ul>
</div>
);
}Only React JS and JavaScript appear in the rendered list because Python is marked as unavailable.
HTML tables have specific structural requirements. React Fragments can group table cells or rows without introducing an invalid wrapper element.
Example:
function TableRow({ student }) {
return (
<tr>
<td>{student.id}</td>
<td>{student.name}</td>
<td>{student.course}</td>
</tr>
);
}
function App() {
const students = [
{ id: 1, name: "Aarav", course: "React JS" },
{ id: 2, name: "Priya", course: "JavaScript" }
];
return (
<table border="1" cellPadding="8">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Course</th>
</tr>
</thead>
<tbody>
{students.map((student) => (
<TableRow key={student.id} student={student} />
))}
</tbody>
</table>
);
}Each student is rendered as a table row, and the key is attached to the component returned directly by map().
A component can organize related UI into multiple child elements. Smaller components make the structure easier to understand.
function Profile() {
return (
<section className="profile">
<img src="/images/profile.png" alt="User profile" />
<div>
<h2>Ananya Sharma</h2>
<p>Frontend Developer</p>
<button>View Profile</button>
</div>
</section>
);
}
function App() {
return (
<main>
<h1>Team Members</h1>
<Profile />
</main>
);
}The Profile component contains several elements, and the App component renders it as part of a larger interface.
| Mistake | Correct Approach | Explanation |
|---|---|---|
| Returning multiple sibling elements without grouping. | Wrap them in a parent element or Fragment. | A component return expression needs one root JSX expression. |
| Adding unnecessary wrapper elements. | Use a Fragment when no DOM wrapper is needed. | Fragments group elements without adding a DOM node. |
| Rendering list items without keys. | Use stable, unique keys. | Keys help React track items when a list changes. |
| Using random values as keys on every render. | Use stable IDs from the data. | Changing keys can cause elements to be recreated unnecessarily. |
| Using the shorthand Fragment in a list where a key is needed. | Use |
The shorthand Fragment cannot accept a key prop. |
| Repeating similar JSX for many data items. | Use a reusable component and map(). |
This reduces duplication and improves maintainability. |
| Forgetting to return JSX from a block-bodied arrow function. | Use an explicit return or an implicit expression return. |
Without a return, the callback produces undefined. |
| Using an invalid wrapper inside a table. | Use valid table structure and Fragments where appropriate. | HTML elements must follow the table's structural rules. |
This example combines reusable components, arrays, map(), keys, and Fragments to render multiple courses.
function CourseCard({ course }) {
return (
<article className="course-card">
<h2>{course.name}</h2>
<p>Duration: {course.duration}</p>
<p>Level: {course.level}</p>
<button>View Details</button>
</article>
);
}
function App() {
const courses = [
{
id: 1,
name: "React JS",
duration: "8 Weeks",
level: "Beginner"
},
{
id: 2,
name: "JavaScript",
duration: "6 Weeks",
level: "Beginner"
},
{
id: 3,
name: "Advanced React",
duration: "10 Weeks",
level: "Advanced"
}
];
return (
<>
<header>
<h1>Technology Training Courses</h1>
<p>Choose a course to begin learning.</p>
</header>
<main className="course-list">
{courses.map((course) => (
<CourseCard key={course.id} course={course} />
))}
</main>
</>
);
}
export default App;Concepts covered:
map() for rendering multiple course cards.| Feature | Parent Element | React Fragment | Array of Elements |
|---|---|---|---|
| Purpose | Groups elements in a container. | Groups elements without a wrapper DOM node. | Stores or produces multiple renderable elements. |
| Extra DOM wrapper | Yes, for a DOM parent such as div. |
No. | Not inherently; the surrounding structure depends on where the array is rendered. |
| Syntax | |
<>... |
[element1, element2] |
| Can contain multiple elements | Yes. | Yes. | Yes. |
| Common use | Layout and styling. | Grouping without an extra DOM node. | Rendering prepared elements or collections. |
| Keys needed | Not merely because it is a parent. | Needed when each Fragment is an item in a rendered list. | List children need appropriate keys when generated as a collection. |
map() to render collections of data.Fragment component when a Fragment in a list needs a key.It means displaying multiple JSX elements or components together in the user interface, such as headings, paragraphs, buttons, and cards.
The component must return one JSX expression. Multiple sibling elements can be grouped using a parent element or a Fragment.
A Fragment groups multiple elements without adding an extra DOM element. It can be written using <>... or the explicit Fragment component.
A parent DOM element such as div appears in the rendered DOM, while a Fragment groups its children without introducing an extra DOM node.
The map() method transforms each item in an array into a JSX element or component, making it easy to render collections.
Keys help React identify each sibling item when elements are added, removed, or reordered.
Yes. React can render arrays of renderable elements. When rendering a collection, provide appropriate keys for the items.
Use reusable components when the same UI structure appears multiple times with different data, such as product cards, student profiles, or course cards.
Yes. When each item needs multiple sibling elements, use the explicit Fragment component with a stable key.
map() transforms each item into a new value, often a JSX element. filter() selects only the items that satisfy a condition.
map() to render data-driven lists.filter() to display selected items.Rendering multiple elements is an essential React JS skill. Developers can group elements using parent containers or Fragments, create collections using arrays and map(), and build reusable interfaces with components and props. Stable keys and valid JSX structure help keep the code reliable and maintainable.
Practice these techniques by creating a course listing page, product catalog, student directory, or dashboard. These projects demonstrate how React combines multiple elements into complete user interfaces.
