JavaScript 配列をswitchにより展開時、一番目のみに特定のテキストを表示させたい React.js

Question

＜実現したいこと＞
下記１が実装したい簡易的な画面です。
下記２が現状の画面です。

１

全国
　関東エリア(kantoArea)
　 東京都
　 神奈川県
　 千葉県
　 埼玉県

　中部エリア(chubuArea)
　 愛知県
　 岐阜県
　 三重県
.
.

２

全国
　関東エリア
　　東京都
　関東エリア
　　神奈川県
　関東エリア
　　千葉県
　関東エリア
　　埼玉県
.
.

上記のように、kantoArea配列とすると
kandtoArea[0]には東京都,[1]には神奈川県、、
という具合にデータが格納されているとします。

各都道府県には更にオブジェクトとして、areaプロパティがあり、関東エリアの都道府県の場合は、

area: "kantoArea"

のように格納されています。

これらを普通に展開すると、

現状のように全てに「関東エリア」　が付いて表示されてしまいます。

例えばswitch文により、

case kantoArea:
 const kanto = data.map((item)=>{
  return(
   // item.nameは都道府県名
   <span>{item.name}</span>
  )
 return (
  <span>関東エリア</span>
  <span>{kanto}</span>
 )

case chubuArea:
...

のように書く場合、kantoAreaの１番目の都道府県(=東京都)の文頭のみ、「関東エリア」と表示させてい場合、
どのような実装をすれば良いのでしょうか。

"datas": [
            {
              "name": "東京",
              "area": "kanto"
            },
            {
              "name": "千葉",
              "area": "kanto"
            },
            {
              "name": "神奈川",
              "area": "kanto"
            },
            {
              "name": "愛知",
              "area": "chubu"
            },
            {
              "name": "岐阜",
              "area": "chubu"
            },
            {
              "name": "大阪",
              "area": "kansai"
            },
            {
              "name": "兵庫",
              "area": "kansai"
            },
            {
              "name": "京都",
              "area": "kansai"
            }
          ]

Answer 1

質問でお求めの回答とは異なりますが、以下のようにするのがよいと思います。

(1)都道府県の配列が以下のようなものであるとします。

[
  { name: '東京都', area: 'kantoArea' },
  { name: '神奈川県', area: 'kantoArea' },
  { name: '千葉県', area: 'kantoArea' },
  { name: '埼玉県', area: 'kantoArea' },
  { name: '愛知県', area: 'chubuArea' },
  { name: '岐阜県', area: 'chubuArea' },
  { name: '三重県', area: 'chubuArea' }    
]

(2)(1)の配列から、以下のような areaごとにグルーピングした配列を作ります。

[
  {
    area: 'kantoArea',
    prefectures: [
      '東京都',
      '神奈川県',
      '千葉県',
      '埼玉県'
    ]
  },
  {
    area: 'chubuArea',
    prefectures: [
      '愛知県',
      '岐阜県',
      '三重県'
    ]
  }
]

(3) 上記のareaごとにグルーピングした配列をmap して、mapに与える関数の引数名を仮にdataとします。data は areaと prefecturesを持つオブジェクトです。

(4) (3)の各data をpropとして受け取るコンポーネントを　例えば

<Area data={data} />

というものとして作ります。

(5) Area コンポーネントの中では、prop dataの

　・name プロパティを使って、　関東エリア(kantoArea)の部分の<span>を作り、
・prefecturesプロパティを mapで展開してそのエリアが含む都道府県の各<span>を作ります。

追記

以下は、上記の考え方によるコードの一例です。groupByAreaという関数によって、エリアごとにグルーピングした配列を作成します。

const areaNames = {
  kanto: '関東エリア',
  chubu: '中部エリア',
  kansai: '関西エリア',
};

const datas = JSON.parse(`[
  { "name": "東京", "area": "kanto" },
  { "name": "千葉", "area": "kanto" },
  { "name": "神奈川", "area": "kanto" },
  { "name": "愛知", "area": "chubu" },
  { "name": "岐阜", "area": "chubu" },
  { "name": "大阪", "area": "kansai" },
  { "name": "兵庫", "area": "kansai" },
  { "name": "京都", "area": "kansai" }
]`);

const groupByArea = prefectureDatas => 
  prefectureDatas.reduce((ary, { name, area }, i) => {
    const last = ary.length > 0 ? ary[ary.length-1] : null;
    if (!last || last.area !== area)
      ary.push({ area, prefectures: [name] });  
    else
      last.prefectures.push(name);      
    return ary;
  }, []);


const Prefecture = ({ name }) => (
  <span className="prefecture">{name}</span>
);

const Area = ({ data: { area, prefectures }}) => (
  <div className="area-box">
    <span className="area">{areaNames[area]}</span>
    {prefectures.map(pref => <Prefecture key={pref} name={pref} /> )}
  </div>
);

const App = () => {
  const areaDatas = groupByArea(datas);
  console.log(areaDatas);
  
  return (
    <div>
      {areaDatas.map(data => <Area key={data.area} data={data} />)}
    </div>
  );
}


const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

• codepen ???? tera: 374247#2

Comments

[sarukawa]

ありがとうございます。
JSONの構造を変えるという事ですね。
追記をしたのですが、現状追記のようなデータ構造になっているとしまして、
配列を展開した際に、kanto, chubu, kansaiそれぞれの１番目のみに「関東エリア」「中部エリア」「関西エリア」を頭に付けたい場合はどのような手立てがありますでしょうか。

[退会済みユーザー]

こんな感じでやるとよいでしょう〜????

https://codepen.io/kilesa/pen/bGoWeYj?editors=0110