How to Loop Inside React JSX

📘 Premium Read: Access my best content on Medium member-only articles — deep dives into Java, Spring Boot, Microservices, backend architecture, interview preparation, career advice, and industry-standard best practices.

🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.

▶️ Subscribe to My YouTube Channel (176K+ subscribers): Java Guides on YouTube

▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube

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