How to Loop Through Array List in ReactJS?

In this tutorial, we will learn how to handle an array or list and loop through it in reactjs. We will iterate the values of the array and print them one by one in react jsx template file.

It is very common when you are building a react web application then you may need to handle the array data and make an iteration function to print them.

You can use the javascript For loop, forEach loop, etc to return the array of data in the function and update it into the state. Then you can access the state variable in the render function.

But in this example tutorial, we will learn a very simple way to loop through the array/list in reactjs. We will use the javascript map() function inside the render() function to make iteration array values.

So let’s start the tutorial to loop through the array data in reactjs using the real-world example that you can take as references for your web application.

JavaScript Array map() Function

The map() function creates a new array when calls a function for every array element. It will not execute the function if the value of the array element is empty. And also it will not change the original array, it keep as same.

Syntax
array.map(function(currentValue, index, arr), thisValue)

const numbers = [35, 76, 2, 89];
const sqNum = numbers.map(numberSquare);

function numberSquare(num) {
    return Math.pow(num,2);
}

console.log(sqNum);

So the above example of simple map() function. So we will use this function in our react application. We can also use the For loop and forEach loop but they have different processes of accessing in react component.

And officially React documentation also recommends using the map() function, because it keeps the original array the same as it is and creates a new array from the array elements.

Let’s see how we can use it in the reactjs to loop through the array or list data.

Loop Through Array or List in ReactJS

Let’s now use the map() function in our react component and loop through the array data. We will see two examples, one with normal array data and the second with array object data.

Example 1

Suppose you have a fruit ordering web application where you want to show the all fruit list, so customers can select it to make an order. So first fetch the all fruit list from a database or from a file.

Fetched fruit list from database

const fruits = ['Apple', 'Banana', 'Mango', 'Pine Apple', 'Blue Berry', 'Grapes'];

To print array list with map() function

{this.state.fruits.map((fruit, index) => (  
    <li key="{index}">  
        {fruit}  
    </li>  
))}

See the following full example code to loop through the array fruit list in reactjs.

import React from 'react'

class FruitBar extends React.Component {
    render() {
        return(
            <ul>
                {this.state.fruits.map((fruit, index) => (  
                    <li key="{index}">  
                        {fruit}  
                    </li>  
                ))} 
            </ul>
        )
    }
}

export default FruitBar;

In the above code, we passed the array data to the map() function and take two arguments. The first one is the single element inside of the fruit array and the second one is the index of an array element.

You may also have noticed that we used the key attribute and have value as an index value. The key attribute is a must to have in the list element as we did above.

Example 2

Now let’s suppose you want to print the price of each fruit. So first, we will make a SQL query to fetch the result from the database as an array object.

Fetched array list from database

const fruits = [  
    {  
        'id': 1,   
        'name': 'Apple',   
        'price': 6.00  
    },
    {  
        'id': 2,   
        'name': 'Banana',   
        'price': 5.00  
    },
    {  
        'id': 3,   
        'name': 'Mango',   
        'price': 4.80  
    },
    {  
        'id': 4,   
        'name': 'Pine Apple',   
        'price': 7.70  
    },
    {  
        'id': 5,   
        'name': 'Blue Berry',   
        'price': 3.87  
    },
    {  
        'id': 6,   
        'name': 'Grapes',   
        'price': 4.56  
    },  
];

To print array list with map() function

{this.state.fruits.map((fruit, index) => (  
    <li key="{fruit.id}">  
        Name: {fruit.name}, Price: {fruit.price}  
    </li>  
))}

I have printed the array data as listed in the above code, but you can also make a datatable for pretty print. See the following full example code in react class component.

import React from 'react'

class FruitBar extends React.Component {
    render() {
        return(
            <table>
                <tr>
                    <th>Fruit</th>
                    <th colspan="2">Price</th>
                </tr>
                {this.state.fruits.map((fruit, index) => (  
                    <tr key="{fruit.id}">  
                        <td>{fruit.name}</td>
                        <td>{fruit.price}</td>  
                        <td>Buy Now</td>  
                    </tr>  
                ))} 
            </table>
        )
    }
}

So use the above examples as a reference to loop through the array list in your reactjs web application. You can make changes accordingly as per your requirements.

Note: Above both examples are based on the react class component. If you are using the react function component then you can use the code as follows.

Loop through array list data in react function component

In the function component, you just have to create the normal function. You don’t need to create the class and the render() function. Just create a function and export it.

import React from 'react'

function FruitBar() {

    const fruits = ['Apple', 'Banana', 'Mango', 'Pine Apple', 'Blue Berry', 'Grapes'];
    
    return(
        <ul>
            {fruits.map((fruit, index) => (  
                <li key="{index}">  
                    {fruit}  
                </li>  
            ))} 
        </ul>
    )
}

export default FruitBar;

As you can see in the above code, we create the function component and access the fruit variable directly. So the same thing you can do for the second example without the class component.

See Also: Create React Application Using Multiple Components

Conclusion

So in this tutorial, you learned how to handle the array list data in reactjs and loop through them in the jsx template render() function using the map() function.

You also see that how to iterate the array data in the react class component and in the react function component.