The for Loop in React

When an array contains products, users, or other records, React can render one element or component for each item. Use .map() for the usual one-to-one transformation; choose a JavaScript for loop when its explicit steps make the work clearer. Both approaches produce an array of elements that React can render.

Render Lists in React with .map()

Start with the records you want to display. This standalone JavaScript example turns each product into a label; it does not use React or mount a component. The output below is the observed output for this JavaScript example only.

const products = [
  { id: "mug", name: "Ceramic mug", price: 12 },
  { id: "notebook", name: "Notebook", price: 8 },
];

const labels = products.map((product) => `${product.name}: $${product.price}`);
console.log(labels.join("\n"));

Ceramic mug: $12
Notebook: $8

For JSX, map the same data to elements: products.map((product) => <li key={product.id}>{product.name}: ${product.price}</li>). Put the returned array inside the markup where the list belongs, for example <ul>{products.map((product) => <li key={product.id}>{product.name}</li>)}</ul>. React renders the array directly, so add a wrapper only when the page structure calls for one. These JSX snippets describe React rendering and are not covered by the JavaScript runtime evidence above.

You can also map each record to a reusable component. Define function ProductCard(props) { return <li>{props.name}: ${props.price}</li>; }, then render it with products.map((product) => <ProductCard key={product.id} name={product.name} price={product.price} />). The child receives name and price in its props object and reads those values to build its output. You could instead pass the whole record as product={product} and read props.product.name and props.product.price inside the component. Choose the interface that makes the data a component needs clear.

Each mapped sibling needs a key that is unique among its siblings and stable for the same record, usually an ID from the data. Avoid using an array index when items may be inserted, removed, or reordered: after a change, an index can point to a different record and cause React to associate component state with the wrong item. React uses key to match list elements during updates; it is not passed to the child as a prop. See React’s guide to rendering lists for more on keys and list rendering.

Use a JavaScript for Loop

A JavaScript for loop is useful when you want to assemble elements through explicit steps. In a component, initialize an array before return, push one keyed element for each product, and then include the array in the returned markup. Here is a complete component expressed line by line; it uses the products data declared above:

function ProductList() {
const items = [];
for (let i = 0; i < products.length; i += 1) {
const product = products[i];
items.push(<li key={product.id}>{product.name}: ${product.price}</li>);
}
return <ul>{items}</ul>;
}

This component is a React/JSX illustration, not part of the executed JavaScript example. The loop runs while the component prepares the result; a statement cannot sit directly inside JSX. For a simple one-to-one transformation, .map() is usually shorter and makes the relationship between each record and its element easy to scan. A loop can be clearer when building the result requires several statements or conditional steps. Both patterns should use stable keys on the elements they return.

Use an Immediately Invoked Function

An immediately invoked function expression (IIFE) can contain statements inside a JSX expression, but it is an uncommon choice for rendering a list. For example, the JSX expression {(() => { const items = []; for (let i = 0; i < products.length; i += 1) { const product = products[i]; items.push(<li key={product.id}>{product.name}</li>); } return items; })()} creates and returns an array immediately. This is a syntax illustration, not an executed React example. Keep the returned value on the same line as return or place it in parentheses; a line break immediately after return can make JavaScript return undefined through automatic semicolon insertion. For ordinary lists, .map() or a loop before the component’s return is easier to read and maintain.