How to Loop Through an Array in React JS Using map()

INTRODUCTION

When developing React applications, you will often need to display multiple items from an array. For example, you might have a list of users, products, students, or menu items that need to be displayed dynamically.

React makes this straightforward by allowing us to use JavaScript array methods such as map() to generate JSX elements from array data.

In this article, we'll learn how to loop through arrays in React and display their values using practical examples.

Why Loop Through an Array in React?

Suppose you have the following array:

const names = ["Jack", "Mary", "John", "Krish", "Navin"];

Instead of manually writing HTML for every name, you can loop through the array and generate an element for each value.

This makes your React components:

Easier to maintain
More dynamic
Less repetitive
Better suited for data-driven interfaces

React's documentation recommends using JavaScript's map() method when rendering lists of components from arrays.

Using map() to Loop Through an Array

The map() method creates a new array by applying a function to every element of the original array.

Here's a simple React example:

import React from "react";

function App() {
const names = ["Jack", "Mary", "John", "Krish", "Navin"];

return (

React Array Loop Example

  <ul>
    {names.map((name, index) => (
      <li key={index}>{name}</li>
    ))}
  </ul>
</div>

);
}

export default App;

Here, map() goes through each item in the names array and creates an

element.

The resulting list will contain:

Jack
Mary
John
Krish
Navin
Looping Through an Array of Objects

In real-world applications, arrays commonly contain objects rather than simple strings.

For example:

const students = [
{
id: 1,
name: "Jack",
email: "[e-mail]"
},
{
id: 2,
name: "Mary",
email: "[e-mail]"
},
{
id: 3,
name: "John",
email: "[e-mail]"
}
];

We can use map() to display this information in a table:

import React from "react";

function App() {
const students = [
{
id: 1,
name: "Jack",
email: "[e-mail]"
},
{
id: 2,
name: "Mary",
email: "[e-mail]"
},
{
id: 3,
name: "John",
email: "[e-mail]"
}
];

return (

Student List

  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Email</th>
      </tr>
    </thead>

    <tbody>
      {students.map((student) => (
        <tr key={student.id}>
          <td>{student.id}</td>
          <td>{student.name}</td>
          <td>{student.email}</td>
        </tr>
      ))}
    </tbody>
  </table>
</div>

);
}

export default App;

In this example, map() receives each student object. We can then access its properties using:

student.id
student.name
student.email

Why Is the key Important?

When rendering a list, React expects each item to have a unique key.

For example:

{students.map((student) => (

{student.name} ))}

A database ID or another stable unique identifier is generally a good choice for the key. React uses keys to identify individual items when a list changes, such as when items are inserted, removed, or reordered.

Avoid generating keys dynamically with values such as:

key={Math.random()}

A stable identifier from your data is preferable.

map() vs forEach() in React

Both map() and forEach() can iterate over an array, but they behave differently.

map() creates and returns a new array:

const numbers = [1, 2, 3];

const doubled = numbers.map((number) => number * 2);

console.log(doubled);

Output:

[2, 4, 6]

forEach() is generally used when you want to act as each item rather than create a new array:

numbers.forEach((number) => {
console.log(number);
});

Since React can render arrays of JSX elements, map() fits naturally into list-rendering code.

Can We Use a for Loop in React?

Yes, JavaScript for loops can be used to process arrays. However, you generally cannot place a traditional for statement directly inside JSX.

For example, instead of trying to write:

return (

for (...) { ... } );

you can create the array of JSX elements before the return statement.

However, for straightforward list rendering, map() is usually cleaner:

const items = names.map((name) => (

{name}

));

Then render it:

{items}

Using map() with Conditional Rendering

You can also combine map() with conditional logic.

For example:

const products = [
{ id: 1, name: "Laptop", available: true },
{ id: 2, name: "Mouse", available: false },
{ id: 3, name: "Keyboard", available: true }
];

function App() {
return (

{products.map((product) => (

{product.name} - {product.available ? "Available" : "Out of Stock"}

))}

);
}

This allows React to generate dynamic content based on the data.

Conclusion

Looping through arrays is a common requirement when building React applications. Instead of manually creating individual JSX elements, you can use JavaScript's map() method to transform array data into React elements.

The main points to remember are:

Use map() to render items from an array.
Access object properties inside the map() callback.
Give rendered elements a stable and unique key.
Prefer stable IDs from your data for keys.
Use filter() together with map() when you need to display only specific items.

Once you understand array rendering with map(), you can use the same approach for product lists, user profiles, navigation menus, tables, comments, and many other React interfaces.