[extra88]

You may need the .map() for styling based on status but

  const isLast = i === cards.length - 1
  const className = "card" + isLast ? '' : 'card-margin'

Seems funny to argue for JavaScript's simplicity while using .map() and an anonymous callback function; a good ol' for loop would make it more clear what's happening.

> all in one place and in one language

That seems like the real reason, keeping to one language.

I think following the rule of least power [0], having HTML semantics do what it's good at, CSS what its good at, and JavaScript for the rest is best for robust and performant outcomes.

  <Card className={className}  />

I only have a little experience with React and that was a while ago, can you not have the Card typed as an Element to use `Card.classList.add(className)`?

[0] https://en.wikipedia.org/wiki/Rule_of_least_power

[mst]

> Seems funny to argue for JavaScript's simplicity while using .map() and an anonymous callback function; a good ol' for loop would make it more clear what's happening.

When you're doing a side effect free transform of some data, I find .map far clearer.

A for loop would require .push type noise for that case and so personally I'd find that noisier and harder to skim read.

Tastes vary, of course, but certainly it doesn't seem funny to me at all.