Hello Devs,

In this tutorial, we are going to see example of react loop through array in render.

Given below are few examples for react loop through array in render.




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 - Rathorji.in</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 - Rathorji.in</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;


I hope this example helps you.