ReactのJSX内のmapループで最後だけ特定の処理やコンテンツを表示する方法

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、ReactのJSX内のmapループで最後だけ特定の処理やコンテンツを表示する方法について解説していきます。

1 ReactのJSX内のmapループで最後だけ特定の処理やコンテンツを表示する方法
2 JavaScript書籍 Ver. 中級-上級者向け
3 JavaScript書籍 Ver. 初級者向け
4 Twitterやってます！Follow Me！
5 最近の投稿

ReactのJSX内のmapループで最後だけ特定の処理やコンテンツを表示する方法

ReactのJSX内のmapループで最後だけ特定の処理やコンテンツを表示する場合は、次のように通常の条件分岐を使って、処理をすることができます。

そもそもmap()内部がJavaScriptの処理空間なので、そのままJSの条件文が使えます。

interface Card {
  id: number;
  participant: string;
  affiliation: string;
}

const Test2 = () => {
  /** 名前と部署の名簿情報List */
  const cardList: Card[] = [
    { id: 1, participant: "ロボたま", affiliation: "エンジニア" },
    { id: 2, participant: "まりたま", affiliation: "エンジニア" },
    { id: 3, participant: "白桃", affiliation: "営業部" },
    { id: 4, participant: "ももちゃん", affiliation: "営業部" },
    { id: 5, participant: "まさぴょん", affiliation: "営業部" },
    { id: 6, participant: "まりぴょん", affiliation: "デザイナー" },
    { id: 7, participant: "ハム太郎", affiliation: "エンジニア" },
    { id: 8, participant: "ロボ太郎", affiliation: "デザイナー" },
    { id: 9, participant: "まり太郎", affiliation: "デザイナー" },
    { id: 10, participant: "ぷる玉", affiliation: "人事部" },
    { id: 11, participant: "ぷるぷる玉", affiliation: "人事部" },
    { id: 12, participant: "ロボ玉試作1号機", affiliation: "エンジニア" },
    { id: 13, participant: "ロボ玉試作2号機", affiliation: "デザイナー" },
    { id: 14, participant: "ロボ玉試作1号機", affiliation: "ロボ玉開発部" },
  ];

  return (
    <div>
      <div>
        {cardList.map((card: Card, index: number) => {
          // mapメソッドの内部で、条件文を記述する
          if (cardList.length === index + 1) {
            return (
              <div>
                <div>
                  <span>ID: {card.id}</span>
                  <span>所属・部署: {card.affiliation}</span>
                  <span>名前: {card.affiliation}</span>
                </div>
                <div>〜完〜</div>
              </div>
            );
          } else {
            return (
              <div>
                <span>ID: {card.id}</span>
                <span>所属・部署: {card.affiliation}</span>
                <span>名前: {card.affiliation}</span>
              </div>
            );
          }
        })}
      </div>
    </div>
  );
};

export default Test2;