React · Theory

Loop an Array in React

Theory

47/94

Loop an Array in React

Freshers google ‘loop array in React’ because for/while feel natural. Inside JSX braces you need an expression. map is that expression. Outside JSX, a normal for is fine: build rows, then {rows} in the return.

forEach doesn’t return anything useful for JSX — it returns undefined. That’s why tutorials insist on map, not forEach.

Loop an Array in React — on screen: Asha, Kabir, Neha. for is fine in JS above return — not inside JSX braces as a statement.

Exam tip

map not forEach inside JSX.

Example

// Loop array
const names = ["Asha", "Kabir", "Neha"];

export default function Roll() {
  return (
    <ul>
      {names.map((n) => (
        <li key={n}>{n}</li>
      ))}
    </ul>
  );
}

Loop an Array in React — on screen: Asha, Kabir, Neha. for is fine in JS above return — not inside JSX braces as a statement.

Short notes

In JSX : map.
Above return : for is OK.
TrapforEach in JSX.

React · Theory

Loop an Array in React

← All stacks

Theory

47/94

Loop an Array in React

forEach doesn’t return anything useful for JSX — it returns undefined. That’s why tutorials insist on map, not forEach.

Loop an Array in React — on screen: Asha, Kabir, Neha. for is fine in JS above return — not inside JSX braces as a statement.

Exam tip

map not forEach inside JSX.

Example

// Loop array
const names = ["Asha", "Kabir", "Neha"];

export default function Roll() {
  return (
    <ul>
      {names.map((n) => (
        <li key={n}>{n}</li>
      ))}
    </ul>
  );
}

Loop an Array in React — on screen: Asha, Kabir, Neha. for is fine in JS above return — not inside JSX braces as a statement.

Short notes

In JSX : map.
Above return : for is OK.
TrapforEach in JSX.

Loop an Array in React

Example

Short notes

Questions

Loop an Array in React

Example

Short notes

Questions