【React】mapのループ内で最後の要素にだけ処理を行う

概要

mapで繰り返ししている要素の最後の要素にだけスタイルを変えたいみたいなのがありあまり調べても出てこなかったのでメモとして残しておきます。

実装

const list = [
  {name: "john1"},
  {name: "john2"},
  {name: "john3"},
]

return (
  <div>
    {list.map((l, i) => (
      <div style={(list.length - 1 === i) ? "最後の要素に付与するクラス名" : "最後以外に付与するクラス名"}>{l.name}</div>
    )}
  </div>
)