Loop Array in React JS | React For each Loop Example

If you are interested to learn about the react animation

In this section, we are going to use an array to explain the reach native loop in the render. For this, we have described a react loop array example in the render. When we want to build any web application, it is very important to have the knowledge of handling an array of data. In this example, we will see the use of loop in react js. In our given example, we are going to use for loop in react js. To perform this, we have to follow some steps.

In this section, we will use react app. When we require a map, foreach loop, and for loop in react, we can look at the following example to learn the use of loop array n react js. In array, we always want for loop and foreach loop. When we want to loop our array in reach, it will require a map to do this. So we are going to explain the example of a map in react native. A new array is created by the map() method. In the calling array, it provides the result of calling a function on each and every element. The looping process can be simplified by this. When we use the map, we don’t require the use of forEach function and for loop. Map, forEach loop, for loop has many differences. Instead of overwriting the existing data, the map function uses the data and creates a new array. Due to all the features and the simplicity of the map function, React docs strongly encourage us to use the map function.

We will provide two examples in react app to explain this easy concept. In the first example, we are going to describe the react loop, which has a single-dimensional array. In the second example, we will describe a loop that has a multidimensional array. Both examples are as follows:

Example 1:

import React from 'react';  
     
function App() {  
     
  const myArray = ['Jack', 'Mary', 'John', 'Krish', 'Navin'];  
    
  return (  
    <div className="container">     
        <h1> Example of React Map Loop </h1>  
     
        {myArray.map(name => (  
          <li>  
            {name}  
          </li>  
        ))}  
     
    </div>  
  );  
}  
     
export default App;  

Example 2:

import React from 'react';  
    
function App() {  
    
 const students = [  
              {  
                'id': 1,   
                'name': Jack,   
                'email': 'jack@gmail.com'  
              },  
              {  
                'id': 2,   
                'name': 'Mary',   
                'email': ?mary@gmail.com'  
              },  
              {  
                'id': 3,   
                'name': 'John',   
                'email': 'john@gmail.com'  
              },  
          ];  
    
  return (  
    <div className="container">  
        <h1> Example of React Map Loop </h1>  
     
        <table className="table table-bordered">  
            <tr>  
                <th>ID</th>  
                <th>Name</th>  
                <th>Email</th>  
            </tr>  
    
            {students.map((student, index) => (  
              <tr data-index={index}>  
                <td>{student.id}</td>  
                <td>{student.name}</td>  
                <td>{student.email}</td>  
              </tr>  
            ))}  
    
        </table>  
    
    </div>  
  );  
}  
    
export default App;  

After running this example, we will get the following preview: