Loop Inside React JSX

In this article, we are going to learn how to iterate on list or collection of data dynamically. However, directly using a loop is not a valid syntax in JSX. It is crucial to understand how to use loops inside React JSX. By iterating on arrays or any collections of data, we can render the component dynamically.

Prerequisites

• ReactJS
• JSX

Approaches to Loop inside React JSX

The map() function and other methods can be used to repeat elements in JSX when we need to iterate over a list or collection of data. This increases the flexibility and efficiency of the user interface by enabling us to dynamically render items based on the data.

• Using For Loop
• Using Map Function

Using For Loop

One way to loop inside React JSX is using a traditional for loop. Even though map() is usually preferred for being simple and readable, sometimes it's better to use a for loop. For example, if you have some complex logic or conditional rendering within the loop, then the for loop is better suited for the task.

Example

In this example, we create an empty array called itemToRender to store JSX Element. Then, we use a for loop to iterate over the items array and push a <li> element for each item into the itemToRender array. Finally, we render the itemToRender array inside the <ul> element.

// App.jsx

import React from 'react';

function App() {
  const items = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];
  const itemToRender = [];

  for (let i = 0; i < items.length; i++) {
    itemToRender.push(<li key={i}>{items[i]}</li>);
  }

  return <ul>{itemToRender}</ul>;
}

export default App;

Output

Using Map Function

Another and most common way to loop over an array and generate dynamic content in React JSX is by using the map() function. Using the map function, we can also accomplish the same thing directly in the JSX component. When using the map function, each item in a list should have a unique key prop.

Example

In this example, we create an array called items. Inside the JSX code, we use the map() function to iterate over each item in the item array. For each item we render an <li> element with the item's value as the content.

Using the map() function is a common and recommended approach when you need to generate dynamic content based on an array of data.

// App.jsx

import React from 'react';

function App() {
  const items = ['Apple', 'Banana', 'Cherry'];

  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

export default App;

Output

Conclusion

When using loops inside React JSX, it's necessary to follow some best practices to ensure readability and efficiency of code:

• Use a unique key prop for each dynamically generated element to make efficiently update and re-render of the components.
• Follow consistent code formatting and indentation for better code readability.
• Avoid performing complex computations or heavy operations inside the loop.
• Consider using memoization techniques or React's useMemo() hook to prevent unnecessary re-rendering of components when the array data doesn't change.