Building web applications means working with large volumes of data, which can be formatted in many different ways. It’s common to have an array of objects that describe individual items. For example, an array of objects where each object describes one of many products of an ecommerce store.
Loop through an array of objects in React – a basic example
for loop is also a good alternative.
Here’s a short comparison of these methods:
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:
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.
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.
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:
First, we have a
data variable to store an array of objects.
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
Finally, we reference the
elementsArray array within JSX, which will display previously generated React elements.
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:
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, and so on until it reaches the length of
data, which is 4.
Note that you need to define the
elementsArray outside of
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:
Let’s look at an example:
filter() with this callback method will return objects where the value of
salary property is higher than
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.
Chaining two methods will create a new array with the
firstName values of objects that satisfied the criteria.