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>
Read Also: Build a Basic CRUD App with Laravel 8 and React.js
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.
Read Also: How to Install React in Laravel 8
If you want to manage your VPS / VM Server without touching the command line go and Checkout this link. ServerAvatar allows you to quickly set up WordPress or Custom PHP websites on VPS / VM in a matter of minutes. You can host multiple websites on a single VPS / VM, configure SSL certificates, and monitor the health of your server without ever touching the command line interface.
If you have any queries or doubts about this topic please feel free to contact us. We will try to reach you.
