React - Rendering an Array of Data with map()

Hello all! In this article, we will talk about react map example. it's simple example of react map example with index. it's simple example of react map array with index. if you have question about react map array to table rows example then i will give simple example with solution.

In this tutorial, i will give you simple example of how to use loop through array using map() 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.

I will give you very simple example og render an array using map with index in react native app. so let's see bellow examples.

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...