How to Loop Inside React JSX

🎓 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 (178K+ 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

My Top and Bestseller Udemy Courses. The sale is going on with a 70 - 80% discount. The discount coupon has been added to each course below:

Build REST APIs with Spring Boot 4, Spring Security 7, and JWT

🆕 High-Demand 80–90% OFF

[NEW] Learn Apache Maven with IntelliJ IDEA and Java 25

🆕 High-Demand 80–90% OFF

ChatGPT + Generative AI + Prompt Engineering for Beginners

🚀 Trending Now 80–90% OFF

Spring 7 and Spring Boot 4 for Beginners (Includes 8 Projects)

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Building Real-Time REST APIs with Spring Boot - Blog App

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Building Microservices with Spring Boot and Spring Cloud

🌟 Top Rated 80–90% OFF
Available in Udemy for Business

Java Full-Stack Developer Course with Spring Boot and React JS

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Build 5 Spring Boot Projects with Java: Line-by-Line Coding

🌟 Top Rated 80–90% OFF

Testing Spring Boot Application with JUnit and Mockito

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Spring Boot Thymeleaf Real-Time Web Application - Blog App

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Master Spring Data JPA with Hibernate

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Spring Boot + Apache Kafka Course - The Practical Guide

🎓 Student Favorite 80–90% OFF
Available in Udemy for Business

Java Testing: Mastering JUnit 5 Framework

🆕 New 80–90% OFF

Reactive Programming in Java: Spring WebFlux and Testing

🌟 Top Rated 80–90% OFF

Spring Boot + RabbitMQ Course - The Practical Guide

🌟 Top Rated 80–90% OFF
Available in Udemy for Business

Functional Programming in Java (Includes Java Collections)

🎓 Student Favorite 80–90% OFF

ChatGPT for Java Developers: Boost Your Productivity with AI

🚀 Trending Now 80–90% OFF