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

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


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': '[email protected]'

},

{

'id': 2,

'name': 'Paresh',

'email': '[email protected]'

},

{

'id': 2,

'name': 'Karan',

'email': '[email protected]'

},

];

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: