How to Loop in React JSX

Jun 14, 2022, Originally published at techvblogs.com ・3 min read

React allows you to easily write JavaScript code inside your components. This makes it easy for any developer to comfortably handle common programming techniques in React, such as looping through a set of items, creating and invoking functions, storing data in local variables, and so on.

Javascript Syntax Extension (JSX), is a JavaScript extension developed and popularized by the React framework that allows you to structure the rendering of elements. It essentially makes it easier to write HTML code in React (describe the UI), and due to its flexibility, JSX has been adopted by other popular frameworks such as Vue.js throughout the years.

In this short tutorial, we will take a look at how to loop inside react JSX elements, working with the following todos array:

const todos = [
  { id: 1, text: "Learn React", status: "completed" },
  { id: 2, text: "Do something", status: "incomplete" },
  { id: 3, text: "Do something else", status: "incomplete" },
];

Loop in React JSX

The map() function introduced in ES6 is the only preferred method for looping in JSX:

{
  todos.map((todo) => (
    <p key={todo.id}>
      {todo.text} - {todo.status}
    </p>
  ));
}

For each element in the array, we map its text and status fields to content within a <p> element, whose key is mapped to the id field. This will generate the following markup result:

<p>Learn React - completed</p>
<p>Do something - incomplete</p>
<p>Do something else - incomplete</p>

Understanding the key Attribute

Depending on the framework/linting tool you are using, if you don’t use a unique key value for each <p> element, you're likely to encounter a warning:

Warning: Each child in a list should have a unique "key" prop

Keys in the React loop help identify which items have been changed, added, or removed, and it is important to give the parent elements inside a loop unique keys to help give a stable identity to the element or component.

Like in our todos array example, we can specify each todo id as the key:

{
  todos.map((todo) => (
    <div key={todo.id}>
      <p key={todo.text}>
        {todo.text} - {todo.status}
      </p>
    </div>
  ));
}

If the item you’re trying to loop through does not have a unique element, such as a unique id - it is a common convention to use the index returned by the map() function for each iterated element instead, ensuring unique element identification without changing your domain model:

{
  todos.map((todo, index) => (
    <div key={index}>
      <p key={todo.text}>
        {todo.text} - {todo.status}
      </p>
    </div>
  ));
}

Conclusion

Using component loops to output and manipulate data is a common development method in React. It allows you to group HTML elements with dynamic data together, as shown in this guide. This would generally be impossible to do in a pure JavaScript app without DOM queries. You should use component loops to output sets of items in a clean, efficient, and readable manner.