React · Theory

map in React

Theory

31/94

map in React

Array.prototype.map is how JSX loops. It returns a new array of elements. You can map numbers to Pass/Fail labels, products to cards, routes to <Route />. Same JS map you used in vanilla — just return JSX instead of a string.

Chain carefully: filter then map. Don’t map inside map into a giant table without keys. If the callback grows past a few lines, make a component.

map in React — on screen — Pass, Pass, Pass. map turns an array into UI.

Exam tip

map is the React loop.

Example

// map
const marks = [40, 72, 88];

export default function Board() {
  return (
    <ol>
      {marks.map((m, i) => (
        <li key={i}>{m >= 40 ? "Pass" : "Fail"}</li>
      ))}
    </ol>
  );
}

map in React — on screen: Pass, Pass, Pass. map turns an array into UI.

Short notes

Defarray.map → JSX list.
Rulereturn one element + key.
Usefilter + map.

React · Theory

map in React

← All stacks

Theory

31/94

map in React

Chain carefully: filter then map. Don’t map inside map into a giant table without keys. If the callback grows past a few lines, make a component.

map in React — on screen — Pass, Pass, Pass. map turns an array into UI.

Exam tip

map is the React loop.

Example

// map
const marks = [40, 72, 88];

export default function Board() {
  return (
    <ol>
      {marks.map((m, i) => (
        <li key={i}>{m >= 40 ? "Pass" : "Fail"}</li>
      ))}
    </ol>
  );
}

map in React — on screen: Pass, Pass, Pass. map turns an array into UI.

Short notes

Defarray.map → JSX list.
Rulereturn one element + key.
Usefilter + map.

map in React

Example

Short notes

Questions

map in React

Example

Short notes

Questions