Reactでリストのデータを表示する

Reactを使って、複数の配列の情報をループの入れ子を使って出力してみます。

サンプルコード

以下のようなデータを使用します。

  const units = ["illumination STARS", "L’Antica", "放課後クライマックスガールズ", "ALSTROEMERIA", "Straylight", "noctchill", "SHHis", "CoMETIK"];
  const idols = [
    { "unit": "illumination STARS", "name": "櫻木真乃", "age": 16 },
    { "unit": "illumination STARS", "name": "風野灯織", "age": 15 },
    { "unit": "illumination STARS", "name": "八宮めぐる", "age": 16 },
    { "unit": "L’Antica", "name": "月岡恋鐘", "age": 19 },
    { "unit": "L’Antica", "name": "田中摩美々", "age": 18 },
    { "unit": "L’Antica", "name": "白瀬咲耶", "age": 18 },
    { "unit": "L’Antica", "name": "三峰結華", "age": 19 },
    { "unit": "L’Antica", "name": "幽谷霧子", "age": 17 },
    { "unit": "放課後クライマックスガールズ", "name": "小宮果穂", "age": 12 },
    { "unit": "放課後クライマックスガールズ", "name": "園田智代子", "age": 17 },
    { "unit": "放課後クライマックスガールズ", "name": "西城樹里", "age": 17 },
    { "unit": "放課後クライマックスガールズ", "name": "杜野凛世", "age": 16 },
    { "unit": "放課後クライマックスガールズ", "name": "有栖川夏葉", "age": 20 },
    { "unit": "ALSTROEMERIA", "name": "大崎甘奈", "age": 17 },
    { "unit": "ALSTROEMERIA", "name": "大崎甜花", "age": 17 },
    { "unit": "ALSTROEMERIA", "name": "桑山千雪", "age": 23 },
    { "unit": "Straylight", "name": "芹沢あさひ", "age": 14 },
    { "unit": "Straylight", "name": "黛冬優子", "age": 19 },
    { "unit": "Straylight", "name": "和泉愛依", "age": 18 },
    { "unit": "noctchill", "name": "浅倉透", "age": 17 },
    { "unit": "noctchill", "name": "樋口円香", "age": 17 },
    { "unit": "noctchill", "name": "福丸小糸", "age": 16 },
    { "unit": "noctchill", "name": "市川雛菜", "age": 15 },
    { "unit": "SHHis", "name": "七草にちか", "age": 16 },
    { "unit": "SHHis", "name": "緋田美琴", "age": 24 },
    { "unit": "CoMETIK", "name": "斑鳩ルカ", "age": 20 },
    { "unit": "CoMETIK", "name": "鈴木羽那", "age": 18 },
    { "unit": "CoMETIK", "name": "郁田はるき", "age": 17 }
  ];

unitsでループを回して、その中でidolsのループを回してunitの一致する値を表示する処理を実装してみます。

function App() {
  const units = ["illumination STARS", "L’Antica", "放課後クライマックスガールズ", "ALSTROEMERIA", "Straylight", "noctchill", "SHHis", "CoMETIK"];
  const idols = [
    { "unit": "illumination STARS", "name": "櫻木真乃", "age": 16 },
    { "unit": "illumination STARS", "name": "風野灯織", "age": 15 },
    { "unit": "illumination STARS", "name": "八宮めぐる", "age": 16 },
    ～ 略 ～
    { "unit": "CoMETIK", "name": "鈴木羽那", "age": 18 },
    { "unit": "CoMETIK", "name": "郁田はるき", "age": 17 }
  ];

  return (
    <>
      {
        // ユニットでループを回す
        units.map((unit) =>
          <section key={unit}>
            <h2>{unit}</h2>
            <ul>
              {
                // 所属ユニットのアイドルのみ追加
                idols
                  .filter((idol) => idol.unit === unit)
                  .map((idol) => (
                    <li key={idol.name}>
                      {idol.name}({idol.age})
                    </li>
                  ))
              }
            </ul>
          </section>
        )
      }
    </>
  )
}

export default App

idolsのループではfilter()でunitの一致する値のみに絞り込んでからmap()で要素の作成を行っています。
リスト表示のデモページ

上記コードは1つのコンポーネントにまとめて記載しているので、いくつかのコンポーネントに分割してみます。
まずはIdol.jsxという名前でファイル名を作成して、idols部分をコンポーネントに分割します。

function Idol( {idol} ) {
  return (
    <li>
      {idol.name}({idol.age})
    </li>
  )
}

export default Idol

propsでidolsのループの内容を受け取る想定です。

次にUnit.jsxを作成して、units部分をコンポーネントに分割します。

import Idol from './Idol.jsx'

function Unit( {unit, idols} ) {
  return (
    <section key={unit}>
      <h2>{unit}</h2>
      <ul>
        {
          // 所属ユニットのアイドルのみ追加
          idols
            .filter((idol) => idol.unit === unit)
            .map((idol) => (
              <Idol key={idol.name} idol={idol} />
            ))
        }
      </ul>
    </section>
  )
}

export default Unit

処理としては最初のデモから基本的に変わっていません。
propsでunitsのループ内容と、Idolのコンポーネントで使用するidolsのデータを受け取っています。

App.jsxの内容をUnitのコンポーネントを使用する形に変更します。

import Unit from './Unit.jsx'

function App() {
  const units = ["illumination STARS", "L’Antica", "放課後クライマックスガールズ", "ALSTROEMERIA", "Straylight", "noctchill", "SHHis", "CoMETIK"];
  const idols = [
    { "unit": "illumination STARS", "name": "櫻木真乃", "age": 16 },
    { "unit": "illumination STARS", "name": "風野灯織", "age": 15 },
    { "unit": "illumination STARS", "name": "八宮めぐる", "age": 16 },
    ～ 略 ～
    { "unit": "CoMETIK", "name": "鈴木羽那", "age": 18 },
    { "unit": "CoMETIK", "name": "郁田はるき", "age": 17 }
  ];

  return (
    <>
      {
        // ユニットでループを回す
        units.map((unit) =>
          <Unit key={unit} unit={unit} idols={idols} />
        )
      }
    </>
  )
}

export default App

これで最初のデモと同じ表示のまま、コンポーネントの分割が行えました。