浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【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 は一度理解してしまえばとても便利なのですが、慣れないと難しいかもしれません。
はじめのうちは、ご注意ください。

  • この記事いいね! (1)