【TypeScript】React Component内でmap関数をネストする方法

1. はじめに

みなさま、楽しいプログラミングライフはお過ごしでしょうか？
JavaScript, TypeScript, Reactを勉強し初めて、ちょうど3ヶ月が経過しようとしています。

自分の勉強ログを発信していこうと思い立って2記事目となります。
いつまで続くか分かりませんが、思いつくままマイペースにやっていこうと思います。

↓以下内容の実行環境です。

	Version
node.js	14.12.0
yarn	1.22.7
TypeScript	3.8.3

2. やりたいこと

表題にもある通り、ReactのComponent内で、map関数をネストしたい（map関数を入れ子にして使いたい）と言う内容になっております。

3. 結論

↓調べながらやってみた感じ、こんな風にreturnの中で、returnを2回返してやればOKでした！
例として、別のReact Componentに引数として値を渡してあげるシチュエーションを考えます。

少しハマったこと
React Componentは1つのReturnで1つの要素しか返せないので、複数要素がある場合や、mapで展開する箇所が含まれている場合はフラグメント<></>などで囲ってあげなければいけません。

import React from "react";
import Fruit from "../Fruit";

const Taste: React.FC = () => {
  const tasts = ["Sweet", "Sour"];
  interface FRUITS_OF_TASTES {
    Sweet: string[];
    Sour: string[];
  }
  const fruitsOfTasts: FRUITS_OF_TASTES = {
    Sweet: ["Apple", "Banana", "Melon"],
    Sour: ["Orange", "Lemon", "Kiwi"],
  };

  return (
    <>
      {tasts.map((tast) => {
        const fruitsKey: keyof FRUITS_OF_TASTES = tast as keyof FRUITS_OF_TASTES;
        return (
          <>
            {fruitsOfTasts[fruitsKey].map((fruits) => {
              return <Fruit fruits={fruits} />;
            })}
          </>
        );
      })}
    </>
  );
};

4. 最後に

まだまだ、JavaScriptの基礎文法しかり、Reactの書き方もなんとなくわかっている気になている段階だなと改めて実感しました。手を動かしながら引き続き勉強していきます！

forEachで良いのでは？
新しい配列を生成していないので、map関数ではなくてforEachで良いのではないかと思われた方いたっしゃると思います。私も最初はそれを試したのですが、forEachだとなぜがブラウザに表示されませんでした。これの原因わかる方いらっしゃいましたら、コメントいただけると嬉しいです！