Render Array of Objects in React: 3 Methods with Code (2026)

Rendering an array of objects is one of the first real hurdles every React developer hits — your data looks fine in the console, but somehow the UI won’t show it, or worse, throws a cryptic key warning. It’s a small problem with an outsized number of ways to get it wrong.

This guide fixes that, once and for all. You’ll learn three practical ways to render lists in React, why the key prop actually matters, how to handle nested data, and how to keep things fast even when your array has thousands of items.

TL;DR Summary

• Rendering an array of objects in React means turning each object into a JSX element, usually with .map(), filter().map(), or reduce().
• The key prop is mandatory because React uses it to track item identity across renders — without it, updates default to position and can mismatch state.
• Nested arrays of objects need a separate .map() for each level, with its own unique key.
• Large arrays should use virtualization, memoization, and stable props to stay fast.
• Common errors — missing keys, undefined arrays, direct mutation — are almost always fixed by giving React a stable identifier and creating new array references.

What Is an Array of Objects in React? (Definition, Use Cases & Why You Need to Render It)

An array of objects is a list where each item is a small package of related data, not just a single value. Instead of a plain list of names, you get a list of full records — each with its own properties.

const products = [
  { id: 1, name: "Wireless Mouse", price: 799 },
  { id: 2, name: "Mechanical Keyboard", price: 2499 },
  { id: 3, name: "USB-C Hub", price: 1199 },
];

Common use cases:

• A list of users, products, or blog posts fetched from an API
• Table rows or dashboard cards
• Dropdown or filter options
• Cart items, comments, notifications
• Any data with more than one field per entry

Why do you need to render it:

Your data doesn’t become a UI on its own. React doesn’t know how to display an array — it only knows how to display JSX elements. So every object in that array has to be turned into something visual: a row, a card, a list item.

The real reason this step matters isn’t just “to show the data.” It’s that each object usually needs to become an interactive, trackable piece of UI — something that can update on its own when its data changes, without redrawing everything else on the page.

That’s the actual job of rendering an array of objects in React: not just displaying the data once, but giving each item an identity so React can update it independently, later, as your app changes.

You can render a React list in minutes—but building products people actually use is a whole different game. HCL GUVI’s IITM Pravartak & MongoDB Certified AI Software Development Course helps you bridge that gap with real-world projects, AI tools, and industry mentorship.

3 Ways to Render an Array of Objects in React (With Code Examples)

There are a few solid ways to render an array of objects in React, and picking the right one depends on whether you need to show everything, filter it first, or transform it into something new. Here are the three you’ll use most:

• .map()
• filter().map()
• reduce()

A. map()

This is the go-to method for rendering an array of objects. It takes every item in the array and turns it into a piece of JSX — nothing gets skipped, nothing gets removed. Use this when you want to display the full list as it is.

const products = [
  { id: 1, name: "Wireless Mouse", price: 799 },
  { id: 2, name: "Mechanical Keyboard", price: 2499 },
  { id: 3, name: "USB-C Hub", price: 1199 },
];

function ProductList() {
  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>
          {product.name} — ₹{product.price}
        </li>
      ))}
    </ul>
  );
}

Code Explanation:

Here, .map() runs once for every object in products. Each object gets destructured into name and price for display, and product.id is passed as the key so React can track each <li> individually. The result is a new array of <li> elements, which React renders inside the <ul>.

B. filter().map()

This method is for when you don’t want to show the whole array — only the items that match a certain condition. You filter first, then map over what’s left. It’s the standard pattern for search results, category filters, or showing only “active” or “in stock” items.

function InStockProducts() {
  return (
    <ul>
      {products
        .filter((product) => product.price < 2000)
        .map((product) => (
          <li key={product.id}>
            {product.name} — ₹{product.price}
          </li>
        ))}
    </ul>
  );
}

Code Explanation:

.filter() runs first and checks every object against the condition product.price < 2000, keeping only the ones that pass and dropping the rest.

That shorter, filtered array is then handed off to .map(), exactly like before, to turn it into JSX. Nothing about the rendering step changes — the only difference is the array is smaller by the time it gets there.

C. reduce()

.reduce() is the odd one out — it’s not really “for rendering” the way .map() is. It’s for reshaping the array of objects into something else first, like grouping items, totaling values, or building a lookup object. You’d typically use .reduce() to prepare the data, then render the result separately.

const cartItems = [
  { id: 1, name: "Wireless Mouse", price: 799, qty: 2 },
  { id: 2, name: "USB-C Hub", price: 1199, qty: 1 },
];

function CartTotal() {
  const total = cartItems.reduce((sum, item) => sum + item.price * item.qty, 0);

  return <p>Total: ₹{total}</p>;
}

Code Explanation:

.reduce() walks through the array one item at a time, carrying a running value (sum) forward at each step. Here, it multiplies each item’s price by its qty and adds that to the running total, starting from 0.

By the end, total is a single number — not an array — which is why this method is used to calculate a value to render, rather than to generate a list of elements directly.

Download HCL GUVI’s free JavaScript eBook to master JavaScript fundamentals with practical examples and hands-on exercises.

Why the key Prop Is Mandatory When Rendering Lists in React

React’s whole rendering model is built on reusing DOM nodes and component state instead of destroying and rebuilding everything on every render — that’s what makes it fast. To reuse something, React first has to answer one question: “Is this the same item as last time, or a new one?”

That answer has to come from somewhere — and that’s the actual reason tracking is mandatory. Without a stable identity per item, React has no basis to decide whether to reuse, create, or destroy, so it defaults to position, which is often wrong.

Without a key:

{users.map((user) => (
  <li>
    {user.name} <input type="text" placeholder="note" />
  </li>
))}

React can’t tell these items apart, so it assumes “item at position 0 is still item 0.” If a new user is added to the front of the list, React just updates the text of the existing <li> at position 0 — it doesn’t realize a new item was inserted. The old <input>, and whatever was typed in it, stays attached to the wrong name.

With a key:

{users.map((user) => (
  <li key={user.id}>
    {user.name} <input type="text" placeholder="note" />
  </li>
))}

Now user.id gives React a real identity to check against, independent of position. So when the list reorders, React can correctly say “this id already existed — reuse it,” or “this id is new — create it.” Reused items keep their state and DOM node; new items get fresh ones.

In short, React needs to track identity because it decides what to reuse vs. rebuild based on that identity. key is mandatory because, without a real identifier, that decision defaults to position — and position isn’t a reliable stand-in for identity.

Also Read: How to use Props in React

Level up your React game with HCL GUVI’s React eBook—learn the basics, build cool projects, and start shipping real apps.

Rendering a Nested Array of Objects in React (One Level Deeper)

A nested array of objects is just an object that has another array of objects tucked inside one of its fields. To render it, you iterate over the outer array as usual — but inside that loop, for each item, you iterate over its inner array as well.

const teams = [
  {
    id: 1,
    name: "Design",
    members: [
      { id: 101, name: "Aarav" },
      { id: 102, name: "Meera" },
    ],
  },
  {
    id: 2,
    name: "Engineering",
    members: [
      { id: 201, name: "Kabir" },
    ],
  },
];

function TeamList() {
  return (
    <div>
      {teams.map((team) => (
        <div key={team.id}>
          <h3>{team.name}</h3>
          <ul>
            {team.members.map((member) => (
              <li key={member.id}>{member.name}</li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

Here’s what’s actually happening: the outer .map() runs once per team, so it fires twice — once for “Design,” once for “Engineering.” Each time, it gives you back one team object. But team.members is itself an array of objects, so a plain {team.name} won’t show it — you have to map over it separately, inside the outer loop, to turn those member objects into <li> elements too.

So you end up with two .map() calls doing two different jobs at the same time: the outer one builds one block per team, and the inner one builds the list of people inside that block.

And notice both levels get their own key — team.id for the outer <div>, member.id for the inner <li> — because React needs to track identity at every level it’s rendering a list, not just the outermost one.

Reading about .map(), .filter(), and .reduce() is one thing — writing them until they’re muscle memory is another. HCL GUVI’s WebKata gives you a live, in-browser coding environment to practice real JavaScript challenges (plus HTML & CSS) with zero setup.

Performance Optimization for Rendering Large Arrays in React

Rendering large arrays gets slow because React has to create and diff every single DOM node — even ones the user can’t see yet. Here’s how to actually fix that:

1. Virtualization — only render the items currently visible on screen, not the whole list.

import { FixedSizeList as List } from "react-window";

<List height={400} itemCount={items.length} itemSize={35} width={300}>
  {({ index, style }) => <div style={style}>{items[index].name}</div>}
</List>

2. Memoization — wrap row components in React.memo so they skip re-rendering if their own data hasn’t changed.

const Row = React.memo(({ item }) => <li>{item.name}</li>);

3. Stable keys and props — avoid creating new objects/functions inline inside .map(), since that breaks memoization even when the underlying data is unchanged.

// Bad — new function created every render
{items.map((item) => (
  <Row key={item.id} onClick={() => handleClick(item.id)} item={item} />
))}

// Better — stable reference
const handleClick = useCallback((id) => { /* ... */ }, []);

4. Pagination or lazy loading — don’t render 10,000 items at once if the user only needs 20 on screen; fetch and render in chunks.

Together, these keep the DOM small, re-renders cheap, and the list fast even as the data grows.

Common Errors When Rendering Array of Objects

When rendering arrays of objects in React, these are the errors you’ll run into most often:

• Missing or duplicate key props
• “Cannot read properties of undefined” when mapping
• Mutating array state directly instead of creating a new array
• Using array index as key on lists that reorder or filter
• Forgetting to return JSX inside a block-bodied .map() callback

Conclusion

Rendering an array of objects in React isn’t complicated once you know what’s actually happening under the hood — React needs identity to track items, and everything from key warnings to laggy lists traces back to that one idea. Get that part right, and the rest — nesting, filtering, performance — is just applying the same logic one layer deeper.

FAQs

1. How do you render multiple objects in React?

You can use the Array’s map functionality to render multiple elements in React. Simply map all your objects into React fragments, so that your Function component can make use of it. But don’t forget to set a unique key prop!

2. How do I render multiple components?

Even if we have multiple elements to render, there can only be a single root element. This means that if we want to render two or more elements, we have to wrap them in another element or component. Commonly, the element used for this is a <div> tag.

3. How to render an array of objects in React?

Using these simple and easy steps, you can render an array of objects in React:

Step 1: Create a react application.
Step 2: Change directory.
Step 3: Create data as an array.
Step 4: Mapping the array into a new array of JSX nodes as arrayDataItems.
Step 5: Return arrayDataItems from the component wrapped in <ul>

4. How do you iterate an array of objects in React JS?

To iterate through an array of objects in ReactJS, you must use the map () method. It creates a new array by applying a provided function to each element of the original array. Within the function, you can access and render each object’s properties as and when needed, effectively iterating through and rendering them in your React component.

5. How do you set an array of objects in state in React JS?

To set an array of objects in the state of a React component, you can use the ‘useState’ hook. So to do this, first, import ‘useState’ from ‘react’. Then, declare a state variable using useState and initialize it with your array of objects. To update the state, use the setter function provided by the useState hook. And voila, now you can easily manage and modify the array of objects within your component’s state.