ForEach Loop in React with Example – Loop Array in React JS

We’ll utilize the react app in this part When we need a map, forEach loop, or for loop in react, we can learn how to utilize the loop array in reactJS by looking at the examples below. We always want a for loop and a forEach loop in an array. When we wish to loop around our array in reach, we’ll need to use a map. As a result, we’ll go over an example of a map in react native. The map() function creates a new array. The outcome of invoking a function on each and every element is stored in the calling array.

This can make the looping process easier. We don’t need to utilize the forEach function or the for loop when we use the map. There are several distinctions between map, forEach loop, and for loop. Rather than overwriting existing data, the map function takes it and utilizes it to construct a new array. React manuals highly advise us to utilize the map function because of all of its capabilities and ease of usage.

To demonstrate this simple concept, we will use two examples in a react app. The react loop, which contains a single-dimensional array, will be described in the first example. We’ll look at a loop using a multidimensional array in the second example. The following are two examples:

Example01 of forEach Loop in React

React loop using a single-dimensional array, open src/App.js file path and paste the following code

src/App.js

import React from 'react';  
     
function App() {  
     
  const myArray = ['Ranjeet', 'Adil', 'Preet'];  
    
  return (  
    <div className="container" style={{background:'red'}}>     
        <h1> Example of React Map Loop </h1>  
     
        {myArray.map(name => (  
          <li>  
            {name}  
          </li>  
        ))}  
     
    </div>  
  );  
}  
     
export default App;

Output:

1st

Example02

React loop using a multi-dimensional array, open src/App.js file path and paste the following code

src/App.js

import React from 'react';  
    
function App() {  
    
 const authors = [  
              {  
                'id': 1,   
                'name': 'Ranjeet',   
                'email': '@ranjeet'  
              },  
              {  
                'id': 2,   
                'name': 'Adil',   
                'email': '@adil'  
              },  
              {  
                'id': 3,   
                'name': 'Preet',   
                'email': '@preet'  
              },  
          ];  
    
  return (  
    <div className="container" style={{background:'red'}}>  
        <h1> Example of React Map Loop </h1>  
     
        <table className="table table-bordered" style={{border:'2px solid black'}}>  
            <tr>  
                <th>ID</th>  
                <th>Name</th>  
                <th>Email</th>  
            </tr>  
    
            {authors.map((author, index) => (  
              <tr data-index={index}>  
                <td>{author.id}</td>  
                <td>{author.name}</td>  
                <td>{author.email}</td>  
              </tr>  
            ))}  
    
        </table>  
    
    </div>  
  );  
}  
    
export default App;  

Output:

2nd

That’s all for this article if you have any confusion contact us through our website or email us at [email protected] or by using LinkedIn.

If you want to learn more about the ReactJS programming language then click the link to see our last article How to get a client or user IP address using React JS code example

2 thoughts on “ForEach Loop in React with Example – Loop Array in React JS”

  1. Ꮋі there! This is kind of off-topic Ƅut I need some guidance from an established blog.
    Is it hard to set up your own blog? I’m not very techincal but I can figure thingѕ
    out pretty qսick. I’m thinking about making my own but I’m not
    sure where to beցin. Do you havе any ideas or suggestions?
    Appreciate it

    Reply
    • Hello, I hope you are doing great!
      If you want to try this example then you have to first create react app…and make sure you have installed node.js in your machine.

      Reply

Leave a Comment