It’s common to have an array of objects that describe individual items. For example, an array of objects where each object describes an individual person. In this article, we’ll show you how to loop through an array of objects in React.
I’ll also show you how to use that data to create DOM elements. Take an array of objects like this:
const data = [
{ firstName: "George", lastName: "Mccarthy", job: "writer", salary: 50000 },
{ firstName: "Michael", lastName: "Handler", job: "DJ", salary: 150000 },
{ firstName: "Larry", lastName: "David", job: "writer", salary: 250000 },
{ firstName: "Mindy", lastName: "Smith", job: "cook", salary: 120000 }
];And use the data to create DOM elements in React.
Specific Examples
Loop through an array of objects in React – a basic example
To loop through an array of objects, we need to use one of these JavaScript methods: map() , forEach(). A for loop is also a good alternative.
Here’s a short comparison of these methods:
The map() method
The most common method for looping through an array of objects in React. It takes one argument – a callback function to specify ‘what to do with’ every item in the array. It is useful if you want to slightly modify each item, and create a new array with modified items.
Map an array of objects to generate React elements
Let’s look at how to use the map() method to loop through an array of objects:
export default function App() {
const data = [
{ firstName: "George", lastName: "Mccarthy", job: "writer", salary: 50000 },
{ firstName: "Michael", lastName: "Handler", job: "DJ", salary: 150000 },
{ firstName: "Larry", lastName: "David", job: "writer", salary: 250000 },
{ firstName: "Mindy", lastName: "Smith", job: "cook", salary: 120000 }
];
return (
<div className="App">
{data.map((person) => (
<div className="card">
<p>{person.firstName}</p>
<p>{person.lastName}</p>
<p>{person.job}</p>
<p>{person.salary}</p>
</div>
))}
</div>
);
}In this example, we have an array of objects stored in data variable. We will use information from each object to create React elements.
A great advantage of using map() method is that you can loop through an array of objects within JSX, as long as the expression is wrapped with curly braces. You can not use forEach() method and for keyword to loop through an array of objects in React.
The map() method accepts a callback function, where the person stands for each object, and creates a new array of React elements filled with object information.
Let’s take a look at the output:
You can look and experiment with the code on CodeSandbox.
The forEach() method
Not as practical as the map() method for looping through an array of objects.
It takes one argument – a callback function, which will be executed on every item in the array. Unlike the map() method, the callback function modifies every item in the array as a side-effect. It does not return them, or the new array made up of modified items. The original array will not be affected.
If you want to save an array of modified items, you have to manually store each modified item in a new array. Let’s look at an example:
export default function App() {
const data = [
{ firstName: "George", lastName: "Mccarthy", job: "writer", salary: 50000 },
{ firstName: "Michael", lastName: "Handler", job: "DJ", salary: 150000 },
{ firstName: "Larry", lastName: "David", job: "writer", salary: 250000 },
{ firstName: "Mindy", lastName: "Smith", job: "cook", salary: 120000 }
];
const elementsArray = [];
data.forEach((person) => {
elementsArray.push(
<div className="card">
<p>{person.firstName}</p>
<p>{person.lastName}</p>
<p>{person.job}</p>
<p>{person.salary}</p>
</div>
);
});
return <div className="App">{elementsArray}</div>;
}First, we have a data variable to store an array of objects.
We create elementsArray to store each item in the array once the callback function modifies them.
We call the forEach() method on data. In order to save modified items, you need to push() each item into the new elementsArray.
Finally, we reference the elementsArray array within JSX, which will display previously generated React elements.
Use for to loop through an array of objects in React
This is the traditional way to loop through any array.
The syntax is simple. We write the for statement, followed by three expressions: initializing the index (i variable), the condition for when the loop should stop (once i reaches the length of array) and expression to execute after every iteration (increment i variable to track the number of iterations).
Let’s skip to example:
const elementsArray = [];
for (let i = 0; i < data.length; i++) {
elementsArray.push(
<div className="card">
<p>{data[i].firstName}</p>
<p>{data[i].lastName}</p>
<p>{data[i].job}</p>
<p>{data[i].salary}</p>
</div>
);During every iteration, you take data from the object at i position in the data array. On first iteration, this will be 0, on second, it will be data[1], and so on until it reaches the length of data, which is 4.
Note that you need to define the elementsArray outside of for loop.
Loop through an array of objects conditionally
As a final example, let’s explain how to loop through an array of objects and only keep objects that satisfy a condition. Let’s stick with data from previous examples:
const data = [
{ firstName: "George", lastName: "Mccarthy", job: "writer", salary: 50000 },
{ firstName: "Michael", lastName: "Handler", job: "DJ", salary: 150000 },
{ firstName: "Larry", lastName: "David", job: "writer", salary: 250000 },
{ firstName: "Mindy", lastName: "Smith", job: "cook", salary: 120000 }
];The filter() method in JavaScript takes one argument – a callback function which checks every object in the array, and returns a new array made up of objects that satisfied the criteria.
Let’s look at an example:
data.filter((object) => object.salary > 120000)
Executing the filter() with this callback method will return objects where the value of salary property is higher than 120000.
It’s possible to chain the map() method on the result of filter() method. This way, you can loop through the array of filtered objects.
data.filter((object) => object.salary > 120000).map(person => person.firstName)
Chaining two methods will create a new array with the firstName values of objects that satisfied the criteria.