Introduction
In React JS, when repetitive tasks need to be executed multiple times until a certain condition is met, developers often utilize loops. Loops are fundamental programming constructs that iterate over a block of code repeatedly, altering it each time based on specified conditions. While React JS itself does not have built-in loop structures like traditional programming languages such as JavaScript, developers can still implement loop-like behavior using JavaScript constructs within React components.
In this article, we will discuss for loop in react js.
Also See, Dropdown in React JS, Hooks in React JS
Using for loop in react js
In React JS, developers often leverage the power of JavaScript's for loop within components to iterate over arrays or collections of data and dynamically render elements. This will become more clear from the following example:
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
Now, let’s say, we add another element ‘four’ into this list. For doing this, React will change each element instead of keeping the elements- <li>one</li>, <li>two</li>, and <li>three</li> intact. This creates inefficiency.
Keys are used to overcome this. Consider the following:
<ul>
<li key=’one’>one</li>
<li key=’two’>two</li>
<li key=’three’>three</li>
</ul>
Now, if ‘four’ is added as following:
<li key=’four’>four</li>
The whole list will not be created again instead, just the new element will be added, making the whole process less time-consuming and more efficient.
For this blog, this much understanding of keys is sufficient.
This whole updation and inserting of elements will become more clear if you understand the concept of React Reconciliation in react js.
Now let us understand for loop in react js.
for(standard)
It is used as any other for loop, similar to other programming language like this:
const arr=['One','Two','Three','Four'];
export default function App() {
const for_loop = []
for (let i=0;i<arr.length;i++) {
for_loop.push(<li>{arr[i]}</li>);
};
return(
<div>
<center><h1>Hello Ninja!</h1></center>
{for_loop}
</div>
)}Output:
Providing keys for elements in react js can be done as follows:
const arr=['One','Two','Three','Four'];
export default function App() {
const for_loop = []
for (let i=0;i<arr.length;i++) {
for_loop.push(<li key={i.toString()}>{arr[i]}</li>);
};
return(
<div>
<center><h1>Hello Ninja!</h1></center>
{for_loop}
</div>
)}
Here, the element’s value is used as the key itself. But, in case you want you can specify any key of your choice.
for-of
In this kind of for loop in react js, every element is iterated by considreing it as a part of the array like this:
const arr=['One','Two','Three','Four'];
export default function App() {
const for_of = []
for (let item of arr) {
for_of.push(<li>{item}</li>);
}
return (
<div>
<center><h1>Hello Ninja!</h1></center>
{for_of}
</div>
)}
It produces the thing on the screen.
Providing keys for elements in react js can be done as follows:
const arr=['One','Two','Three','Four'];
export default function App() {
const for_of = []
for (let item of arr) {
for_of.push(<li key={item.toString()}>{item}</li>);
};
return(
<div>
<center><h1>Hello Ninja!</h1></center>
{for_of}
</div>
)}for-in
In this kind of for loop every element is accessed by its index in react js like this:
const arr=['One','Two','Three','Four'];
export default function App() {
const for_in = []
for (let item in arr) {
for_in.push(<li key={item.toString()}>{arr[item]}</li>);
};
return(
<div>
<center><h1>Hello Ninja!</h1></center>
{for_in}
</div>
)}
There is no change in the output. It remains the same.
Keys for elements in react js can be mentioned as follows:
const arr=['One','Two','Three','Four'];
export default function App() {
const for_in = []
for (let item in arr) {
for_in.push(<li key={item.toString()}>{arr[item]}</li>);
};
return(
<div>
<center><h1>Hello Ninja!</h1></center>
{for_in}
</div>
)}
map()
map() is the most famous way of iteration through the arrays. It is the most widely used way used. map function returns JSX. It uses a key. It stores data in form of pairs. This method forms a new array by calling a function on every element in the calling array. In case, no function is passed, it uses the original element.
const arr=['One','Two','Three','Four'];
export default function App() {
return(
<div>
<center><h1>Hello Ninja!</h1></center>
<ul>
{arr.map((item) => (
<li key={item.toString()}>
{item}
</li>
))}
</ul>
</div>
)}
Usually, developers use map() only. It is very rare that any other function is used.
569+ registered 
