HDTuto.com

React Map Array to Components Example



In this article we will cover on how to implement how to use loop in react js. Here you will learn how to use for loop in react js. let’s discuss about how to use foreach loop in reactjs. you will learn array loop in react native.

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




May 31, 2020 | Category : React



Blog Search


Copyright © 2020 HDTuto.com. All rights reserved.