Loops in JSX
1) Map:
You can iterate over an object using the map method. You can use this method to render the same component again and again. Let’s understand by an example.
Assume we need to display a list of users every time we construct a li >component. Instead, I use the map function to create the li element many times.
import React from 'react'
const App = () => {
const user = ['Rahul', 'Shivam', 'Ayesha', 'Akash', 'Poonam'];
return-
{
user.map((names,i) => {
return
- {names}
-
})
}
}
export default App;
You may have observed that we did not generate li elements 5 times. We iterated the array with a map, and the map returned the new element. The output will be as follows:
Figure 2. using the map Method
2) For
Users can use the standard “for” loop for creating the li element. Here you have to use the length function for giving the last point of the loop.
import React from 'react'
const App = () => {
const users = [
{ id: 1, Name: 'Rahul' },
{ id: 2, Name: 'Shivam' },
{ id: 3, Name: 'Ayesha' },
{ id: 4, Name: 'Akash' },
{ id: 5, Name: 'Poonam' }
];
const displayUser = (users) => {
let name = [];
for (let i = 0; i < users.length; i++) {
name.push(
{users[i].Name})
}
return name
}
return
}
export default App;
3) For-in
The For-in loop allows you to iterate through value and property. Let's look at an example of how to utilize a For-in loop.
import React from 'react'
const App = () => {
const users = [
{ id: 1, Name: 'Rahul' },
{ id: 2, Name: 'Shivam' },
{ id: 3, Name: 'Ayesha' },
{ id: 4, Name: 'Akash' },
{ id: 5, Name: 'Poonam' }
];
const displayUser = (users) => {
let name = [];
for (let idx in users) {
const item = users[idx];
name.push(
{item.Name})
}
return name
}
return
}
export default App;
4) For-of
For-of loop lets you loop over iterable data structures such as arrays, maps, strings, etc. Let’s understand it with an example.
import React from 'react'
const App = () => {
const users = [
{ id: 1, Name: 'Rahul' },
{ id: 2, Name: 'Shivam' },
{ id: 3, Name: 'Ayesha' },
{ id: 4, Name: 'Akash' },
{ id: 5, Name: 'Poonam' }
];
const displayUser = (users) => {
let name = [];
for (let item of users) {
name.push(
{item.Name})
}
return name
}
return
}
export default App;
5) Filter
When we have to apply a condition to records and then show the filtered record using a loop, we must use the filter and map methods both at the same time, which is known as the "chaining technique." The filter will yield a new array, and we will apply the map function to the new array.
import React from 'react'
const App = () => {
const users = [
{ id: 1, Name: 'Rahul' },
{ id: 2, Name: 'Shivam' },
{ id: 3, Name: 'Ayesha' },
{ id: 4, Name: 'Akash' },
{ id: 5, Name: 'Poonam' }
];
return-
{
users
.filter((user) => user.Name.includes('m'))
.map((item) => {
return
- {item.Name}
-
})
}
}
export default App;
While learning all these loops, you might have noticed a ‘key’ property used in the li element. You're probably wondering why we utilized it here. What is its significance? Let’s discuss it.