React - Rendering an Array of Data with map()

By Hardik Savani | May 22, 2020 | Category : React JS


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



Tags : React JS


Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: