react データから取得した複数の値をmapする

Question

react typescriptを使って開発をしています。
dataから取得した値を users, names, agess,に入れて共通のCardコンポーネントにpropsとしてデータをわたしmapで回して表示させたいです。
dataの中身の変数がそれぞれ違うためどう実装したらいいのでしょうか？
わかる人いましたらご教授お願いしたいです

import React, { FunctionComponent } from 'react';
import {
  IUsers,
  INames,
  IAges,
} from 'domain/type.ts';

type Props = {
 data: IUsers | INames | IAges;
};

export const Card: FunctionComponent<Props> = ({
  data,
}) => {
  return (
    <div>
     <span>
      {data.{// ここにそれぞれの配列で回してあげたい変数を入れたい}.map((d, i) => (
        <div key={i}>
            <p>{d}</p>
        </div>
      ))}
    </div>
  );
};

// 親コンポーネント
  <Card
    name={'user'}
    data={users}
  ></Card>
  <Card
   name={'names'}
   data={names}
  ></Card>
  <Card
   name={'ages'}
   data={ages}
  ></Card>

// usersの中身
{
  users: ["aaa", "aaaa",  "aaaaa"]
}

// namesの中身
{　
  names: ["あああ", "あああ" "あああ","あああ","あああ"]
}

// agesの中身
{
  age_group: [
    {
      id: 1
      name: "20"
　　},
   {
　　　id: 2
     name: "21"
   }
  ]
}

Answer 1

こんにちは

以下のようなTAge型 と TData 型

type TAge = {id: number; name: string}
type TData = string | TAge

を作っておき、

interface IUsers {
  users: string[]
}

interface INames {
  names: string[]
}

interface IAges {
  age_group: TAge[]
}

であるとすると、下記でいけるかと思います。

type Props = {
  data: IUsers | INames | IAges
}

const Card: FunctionComponent<Props> = ({ data }) => {
  return (
    <div>
      {Object.values(data)[0].map((d: TData, i: number) => (
        <div key={i}>
          <p>{JSON.stringify(d)}</p>
        </div>
      ))}
    </div>
  );
}

• 動作確認用codepen: jun68ykt/pen/VwjwaYL

参考になれば幸いです。

Comments

[退会済みユーザー]

解決できました！
ありがとうございます！
TAgeとTDataをinterfaseではなくtypeを使っているのはなぜなのでしょうか？
interfaseとtypeの使い分けがわかっておらず、、、
またObject.valueとはdataの中の配列の部分だけを取得しているという認識であっていますか？

[jun68ykt]

どういたしまして。

> TAgeとTDataをinterfaseではなくtypeを使っているのはなぜなのでしょうか？

TAge のほうはinterfaceにして

interface IAge {
id: number
name: string
}

でもよいです。この IAge を使って

type TData = string | IAge

と書けます。ですが、TData のほうは

interface IData = string | IAge

とは書けない（書くとエラーになります）ので、type TData にする必要があります。

> またObject.valueとはdataの中の配列の部分だけを取得しているという認識であっていますか？

はい。結果としてそうなります。

Object.values() メソッド
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/values

は引数で与えられるオブジェクトに含まれる、すべてのプロパティの値だけを取り出して配列にします。今回は、IUsers, INames, IAges のどれもプロパティを1個しか含まないことが分かっているので、

Object.values(data)[0]

によって、data が含む（users, names, age_group のいずれかの値である）配列を取り出せます。

[退会済みユーザー]

ご丁寧に説明していただきありがとうございます！
とてもいい勉強になりました！！