【React】mapを使って入れ子になっている要素を取得する方法

とっさにやり方が分からなかったので、覚え書きとしてまとめ。
React の書き方で、入れ子になっている要素を map で取得する方法です。

通常だと、下記のような書き方になるかと思います。

const list = Object.keys(result).map((data) =>
    <div>{result.data}</div>
);

が、今回扱ったのは、更に入れ子構造になっているので、これだけではだめでした。
なお、サンプルデータは下記のような感じです。

{
    "floor1": [
        {
            "name": "food",
            "category": 2
        },
        {
            "name": "shoes",
            "category": 1
        }
    ],
    "floor2": [
        {
            "name": "clothes",
            "category": 2
        }
    ]
}

上記のようなデータを扱う場合は、map 内でさらに map を使ってデータを展開するする必要があります。

今回参考にさせていただいた記事はこちらから。

javascript – How to have nested loops with map in JSX?
– Stack Overflow
https://stackoverflow.com/questions/47402365/how-to-have-nested-loops-with-map-in-jsx

どうやら、質問者さんも私と同じことでお悩みの要でした。

で、入れ子を展開する方法ですが、下記のように記述します。

const list = Object.keys(result).map(function(title) {
    return (
        <div>{title}</div>
        <table>
            <tr><th>name</th><td>category</td></tr>
            { result[title].map(function(item) {
                <tr><th>item.name</th><td>item.category</td></tr>
            })}
        </table>
    );
});

忘れそうなのは return ですかね。
これの中であれば、再度 map を使うことが可能なようです。
一度、うっかり忘れたときは、エラーが発生しました。

以上、React で 入れ子になっている要素を map で取得する方法でした。
map は一度理解してしまえばとても便利なのですが、慣れないと難しいかもしれません。
はじめのうちは、ご注意ください。