In this article, we will see how to use an array in React JS. We can use the JavaScript standard Array functions in React JS. We can see react loop array example in the render. Also, we are using the map() method. map()
creates a new array from calling a function for every array element. map()
calls a function once for each element in an array. map()
does not execute the function for empty elements.
So, let's see how to access array elements in React JS or how to render an array of components React JS.
we will see how to loop through the Array and display it in the UI.
Create a new String Array using the below code in your index.html file.
The Array contains the list of items. We can iterate and display the Array in the UI using map() function.
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="mydiv"></div>
<script type="text/babel">
function Hello() {
const myArray = ['Laravel', 'PHP', 'Node JS', 'React JS', 'jQuery'];
return (
<div className="container">
<h1> How To Use Array In React JS - Websolutionstuff</h1>
{myArray.map(name => (
<li>
{name}
</li>
))}
</div>
);
}
ReactDOM.render(<Hello />, document.getElementById('mydiv'))
</script>
</body>
</html>
Output:
how to loop through the array of objects. It is similar to the String Array example.
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="mydiv"></div>
<script type="text/babel">
function Hello() {
const tdstyle = {
border:"1px solid black",
padding:"15px",
};
const myArray = [
{
'id': 1,
'name': 'Laravel',
'website': 'https://laravel.com/'
},
{
'id': 2,
'name': 'React JS',
'website': 'https://reactjs.org/'
},
{
'id': 3,
'name': 'jQuery',
'website': 'https://jquery.com/'
},
];
return (
<div className="container">
<h1> How To Use Array In React JS </h1>
<table style={{borderCollapse:"collapse"}}>
<tr>
<th>ID</th>
<th>Name</th>
<th>Website</th>
</tr>
{myArray.map((myArray, index) => (
<tr data-index={index}>
<td style={tdstyle}>{myArray.id}</td>
<td style={tdstyle}>{myArray.name}</td>
<td style={tdstyle}>{myArray.website}</td>
</tr>
))}
</table>
</div>
);
}
ReactDOM.render(<Hello />, document.getElementById('mydiv'))
</script>
</body>
</html>
Output:
You might also like:
In this article, we will see how to remove/hide columns while export data in datatables in laravel 8. When we are u...
Oct-13-2020
In this example we will see how to encrypt and decrypt string in laravel 8 using crypt helper, As we all know laravel fr...
May-07-2021
In this article, we will see how to create a dynamic bar chart in laravel 9. Bar charts are used to represent...
Mar-21-2022
In this example we will see how to generate QR Code in Node.js application. In this example we will use qrcode npm...
Sep-20-2021