Render an Array of Objects in ReactJS

Rendering lists of data is a common task in React applications, and rendering an array of objects in ReactJS is straightforward. When you have a variety of objects and you want to display them in your React component, there are several methods you can use. This article will walk you through the most common approaches using map(), for, for...of, and filter() methods.

Approaches to Render Array of Objects in ReactJS

• Using map() Method
• Using for Loop
• Using for...of loop
• Using filter() Method

Using map() Method

• The map() method iterates over the user's array. Each user object returns a <li> element with the user's details.
• The key prop is essential for performance reasons. It helps React identify which items have changed, added, or removed. Use a unique value, such as user.id, for the key.

Example

import React from 'react';

const UserList = () => {
  const users = [
    { id: 1, name: 'Alice', age: 25, active: true },
    { id: 2, name: 'Bob', age: 30, active: false },
    { id: 3, name: 'Charlie', age: 35, active: true }
  ];

  return (
    <div className="p-4">
      <h1 className="text-2xl font-bold mb-4">User List</h1>
      <ul className="space-y-4">
        {users.map(user => (
          <li key={user.id} className="border p-3 rounded shadow">
            <p className="font-semibold">Name: {user.name}</p>
            <p>Age: {user.age}</p>
            <p>Status: {user.active ? 'Active' : 'Inactive'}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default UserList;

Output

Using for Loop

• Contains user objects with properties such as id, name, age, and active.
• Iterates over each index in the user's array: let i = 0; i < users.length; i++: Sets up the loop to run from index 0 to the length of the user's array.const user=u sers[i]: Retrieves the user object at the current index.items.push(...): Creates a JSX div for each user, including their name, age, and status, and pushes it into the items array.

Example

import React from 'react';

const UserList = () => {
  const users = [
    { id: 1, name: 'Alice', age: 25, active: true },
    { id: 2, name: 'Bob', age: 30, active: false },
    { id: 3, name: 'Charlie', age: 35, active: true }
  ];

  const items = [];
  for (let i = 0; i < users.length; i++) {
    items.push(
      <div key={users[i].id} className="border p-3 rounded shadow mb-4">
        <p className="font-semibold">{users[i].name}</p>
        <p>Age: {users[i].age}</p>
        <p>Status: {users[i].active ? 'Active' : 'Inactive'}</p>
      </div>
    );
  }

  return (
    <div className="p-4">
      <h1 className="text-2xl font-bold mb-4">User List</h1>
      <div>{items}</div>
    </div>
  );
};

export default UserList;

Output

Using for...of loop

• The for...of loop iterates over each object in the user's array.
• The userElements array stores the JSX elements created for each user.
• The key prop helps react efficiently and update the list.

Example

import React from "react";
const UserList = () => {
  const users = [
    { id: 1, name: "Alice", age: 25, active: true },
    { id: 2, name: "Bob", age: 30, active: false },
    { id: 3, name: "Charlie", age: 35, active: true },
  ];

  const userElements = [];
  for (const user of users) {
    userElements.push(
      <div key={user.id}>
        <p>{user.name}</p>
        <p>Age: {user.age}</p>

        <p>Status: {user.active ? "Active" : "Inactive"}</p>
      </div>,
    );
  }
  return <div>{userElements} </div>;
};
export default UserList;

Output

Using filter() Method

• Filters the user's array to include only those where user.active is true.
• Directly follows the filter() call to create JSX elements for each filtered user

Since map() is used here to render the filtered users, it's technically part of the operation but serves a different role from filter(). It is impossible to render components using only filter() without map() because filter() only modifies the array but does not render elements itself.

Example

import React from "react";
const UserList = () => {
  const users = [
    { id: 1, name: "Alice", age: 25, active: true },
    { id: 2, name: "Bob", age: 30, active: false },
    { id: 3, name: "Charlie", age: 35, active: true },
  ];
  return (
    <div>
      {users
        .filter((user) => user.active)
        .map((user) => (
          <div key={user.id}>
            <p>{user.name} </p>
            <p>Age: {user.age} </p>

            <p>Status: {user.active ? "Active" : "Inactive"}</p>
          </div>
        ))}
    </div>
  );
};
export default UserList;

Output

Tips to Handle Empty Arrays

If the provided array got empty then you can check the below solution.

Example

function UserList() {
  return (
    <div>
      <h1>User List </h1>
      {users.length === 0 ? (
        <p>No users found. </p>
      ) : (
        <ul>
          {users.map((user) => (
            <li>
              <p>Name: {user.name} </p>

              <p>Age: {user.age} </p>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

Output