React - Rendering an Array of Data with map() Example

Hello Devs,

In this tutorial, we are going to learn about react map example.

Given below are few examples for react map example.

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': 'Ratorji', 
                'email': 'rathorji@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.