map in React — React Technical Interview Questions & Answers

map in React

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.

Technical Interview Tip: map is the React loop.

Code Examples for map in React

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.

How to Explain map in React to an Interviewer

Explain map as if you are teaching a junior — definition, then one tiny UI.

array.map → JSX list. return one element + key.

What does the example show on screen (or print), and what does that prove?

map in React — on screen: Pass, Pass, Pass

What mistake do freshers make with map?

filter + map.