How to Loop Inside React JSX

In this quick tutorial, we will learn how to loop or iterate over an Array in React JSX.

In this tutorial, we will discuss two ways:

1. JavaScript for-of loop
2. ES6 map function

1. Using for-of loop

Let's create a React class component named ReactLoopDemo and add following code to it:

import React, { Component } from 'react'

class ReactLoopDemo extends Component {
    constructor(props) {
        super(props)
        this.state = {
            employees: [{
                firstName: "Ramesh",
                lastName: "Fadatare",
                emailId: "ramesh@gmail.com"
            },
            {
                firstName: "Tom",
                lastName: "Cruise",
                emailId: "tom@gmail.com"
            },
            {
                firstName: "Tony",
                lastName: "Stark",
                emailId: "ramesh@gmail.com"
            },
            {
                firstName: "John",
                lastName: "Cena",
                emailId: "john@gmail.com"
            }]
        }
    }

    getTableRow(){
       
    }
    render() {

        const items = [];
        for (const employee of this.state.employees) {
            items.push(<tr key = {employee.id}>
                <td> { employee.firstName} </td>   
                <td> {employee.lastName}</td>
                <td> {employee.emailId}</td>
            </tr>)
        }

        return (
            <div>
                 <h2>Employees List</h2>
                 <br></br>
                 <div>
                        <table border = "2">
                            <thead>
                                <tr>
                                    <th> Employee First Name</th>
                                    <th> Employee Last Name</th>
                                    <th> Employee Email Id</th>
                                </tr>
                            </thead>
                            <tbody>
                                {items
                                }
                            </tbody>
                        </table>

                     </div>
               </div>
        )
    }
}

export default ReactLoopDemo

In the above code, we have an array of elements that we need to loop inside JSX. 

First create a for-of loop like:

const items = [];
        for (const employee of this.state.employees) {
            items.push(<tr key = {employee.id}>
                <td> { employee.firstName} </td>   
                <td> {employee.lastName}</td>
                <td> {employee.emailId}</td>
            </tr>)
        }

Now when rendering the JSX you can embed the items array by wrapping it in curly braces:

render() {
 return (
  <div>
    <h2>Employees List</h2>
    <br></br>
    <div>
     <table border = "2">
      <thead>
       <tr>
        <th> Employee First Name</th>
        <th> Employee Last Name</th>
        <th> Employee Email Id</th>
       </tr>
      </thead>
      <tbody>
       {
        this.state.employees.map(
         employee => 
         <tr key = {employee.id}>
           <td> { employee.firstName} </td>   
           <td> {employee.lastName}</td>
           <td> {employee.emailId}</td>
         </tr>
        )
       }
      </tbody>
     </table>

     </div>
     </div>
 )
}

2. Using ES6 map() Function

Let's use the map() method to loop over an array of employee objects in JSX:

import React, { Component } from 'react'

class ReactLoopDemo extends Component {
    constructor(props) {
        super(props)
        this.state = {
            employees: [{
                firstName: "Ramesh",
                lastName: "Fadatare",
                emailId: "ramesh@gmail.com"
            },
            {
                firstName: "Tom",
                lastName: "Cruise",
                emailId: "tom@gmail.com"
            },
            {
                firstName: "Tony",
                lastName: "Stark",
                emailId: "ramesh@gmail.com"
            },
            {
                firstName: "John",
                lastName: "Cena",
                emailId: "john@gmail.com"
            }]
        }
    }

    render() {
        return (
            <div>
                 <h2>Employees List</h2>
                 <br></br>
                 <div>
                        <table border = "2">
                            <thead>
                                <tr>
                                    <th> Employee First Name</th>
                                    <th> Employee Last Name</th>
                                    <th> Employee Email Id</th>
                                </tr>
                            </thead>
                            <tbody>
                                {
                                    this.state.employees.map(
                                        employee => 
                                        <tr key = {employee.id}>
                                             <td> { employee.firstName} </td>   
                                             <td> {employee.lastName}</td>
                                             <td> {employee.emailId}</td>
                                        </tr>
                                    )
                                }
                            </tbody>
                        </table>

                     </div>
               </div>
        )
    }
}

export default ReactLoopDemo

Demo

Use this component in your React App and you can see below the page in a browser:

References

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map