How to Loop Array in React JS? | React Foreach Loop Example

Hi,

This article will give you example of react loop through array in render. We will look at example of react native loop array in render. it's simple example of how to use loop in react js. you will learn how to use for loop in react js. You just need to some step to done how to use foreach loop in reactjs.

In this tutorial, i will give you simple example of how to use loop through array in react app. if you are looking for for loop in react, foreach in react and map in react then i will help you how you can loop array in react js.

we always looking for foreach loop and for loop for array but react use map for loop your array. so let's example map in react native.

i will give you two example one is react loop with single dimensional array and another is loop with multi dimensional array in react app.

Let's see both one by one example and you can use it.

Example 1:

src/App.js

import React from 'react';
   
function App() {
   
  const myArray = ['Hardik', 'Paresh', 'Rakesh', 'Mahesh', 'Kiran'];
  
  return (
    <div className="container">
        <h1>React Map Loop Example - ItSolutionStuff.com</h1>
   
        {myArray.map(name => (
          <li>
            {name}
          </li>
        ))}
   
    </div>
  );
}
   
export default App;

Example 2:

src/App.js

import React from 'react';
  
function App() {
  
 const students = [
              {
                'id': 1, 
                'name': 'Hardik', 
                'email': 'haridik@gmail.com'
              },
              {
                'id': 2, 
                'name': 'Paresh', 
                'email': 'paresh@gmail.com'
              },
              {
                'id': 2, 
                'name': 'Karan', 
                'email': 'karan@gmail.com'
              },
          ];
  
  return (
    <div className="container">
        <h1>React Map Loop Example - ItSolutionStuff.com</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;

You can see bellow preview:

I hope it can help you...