常連

注目の的

社会貢献

質問力

支持者

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"
   }
  ]
}

```

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

以下のAPIの型の定義を①のようにしました。
storeを作成し、②の値をstoreに保存しようと思ったのですが、プロパティ 'select' は型 'Teams' に存在しません。tsというエラーが出てしまいます。
わかる人いましたらご教授お願いしたいです。

```ここに言語を入力
// store 

export class GroupEntity {
  teams: Tesams = ''
  constructor(teams: Teams) {
    this.teams.group.type = teams.group.type
    this.teams.group.status.id = teams.group.status.id
  }
}
```

```ここに言語を入力
①
export class Teams {
  group = new Group()
}
export class Group {
  type: number = ''
  status = new Select()
}

export class Select {
  id: number = 0
  name: string = ''
}
```

```ここに言語を入力
②
teams : [
 {
  "group": [
    {
      "type": "member",
      "status": {
        "select": [
            {
                "id": 0,
                "name": "グループA",
            }, {
                "id": 1,
                "name": "グループB",
            }, 
        ]
      }
    }
  ]
}
```

Vue.js typescript 型定義について

https://teratail.com/questions/265846
上記の質問の続きになります

yarn create next-app　コマンドを実行
yarn add next react react-dom　コマンドを実行
touch tsconfig.json　コマンドを実行
yarn add --dev typescript @types/react @types/node　コマンドを実行
上記の4つのコマンドを実行しnext.jsの環境を構築しました。

この環境にreact + typescriptで作っていたspaアプリのファイルを移行しようと思います。


next.jsのディレクトリを見てみると以下のようになっていました。
react + typescriptのspaアプリを移行したいのですがnext.jsに移行した時、ディレクトリはどういう構成にしたらいいのでしょうか
```ここに言語を入力
// next.js
pages--
       api--
             hello.js
public--
　　　　　favion.ico
next.config.js
tsconfig.json
```

```ここに言語を入力
//react +  typescript (next.jsの環境に移行したい)のディレクトリ
components--
            atoms--
                    Botton.tsx
                    TextField.tsx
            layout--
                    Menu.tsx
            App.tsx
            routes.tsx
pages--
        Login.tsx
        Users.tsx
        UserList.tsx
index.html
index.tsx
eslint.js
tsconfig.json
webpack.config.js
```

react + typescriptのspaアプリをnext.jsに移行したい　ディレクトリどういう構成にすればいいか

セレクトボックスの初期値である食べ物を選択の文字だけ#c7ced7色にしたいのですがうまくスタイルが適応されません。
わかる人がいましたら教えてください。
よろしくお願いします

```
    <p class="create_text">
      <select v-model="selected" @change="onChange()">
       <option value="" disabled selected style="display:none;"
          >食べ物を選択</option
        >
        <option v-for="food in foods" :value="food"
          >{{food.name }}
        </option>
      </select>
    </p>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import Food from '@/food.json'
import {Food } from '@/domain/Food'

@Component
export default class SelectBox extends Vue {
  selected: string = ''
  foods: Food[] = []

  mounted() {
    this.setFood()
  }

  setLocation() {
    this.foods=Food
  }

  onChange() {
    this.$emit('changeFood', this.selected)
  }
}
</script>

<style lang="scss" scoped>
.create {
  padding: 16px;
    &_text {
      width: 100%;
      box-sizing: border-box;
      background: white;
　　　 &-inline {
        width: 150px;
      }
  }
}
select {
  width: 100%;
  background: url(../selectbox.svg) no-repeat;
 option:first {
    color: #c7ced7;
  }
}
```

vue.js scss 　スタイル適応されない

食べ物が選べるセレクトボックスがあります。
セレクトボックスの初期値に食べ物を選択してください。という言葉を入れたいです。
<option value="食べ物を選択してください。" selected></option>
と初期値を設定したのですが画面上では文字が表示されません。
どうやったらいいでしょうか？
ご知識ある方ご教授お願いしたいです。


```ここに言語を入力
    <p class="create_text">
      <select v-model="selected" @change="onChange()">
        <option value="食べ物を選択してください。"></option>
        <option v-for="food in foods" :value="food"
          >{{food.name }}
        </option>
      </select>
    </p>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import Food from '@/food.json'
import {Food } from '@/domain/Food'

@Component
export default class SelectBox extends Vue {
  selected: string = ''
  foods: Food[] = []

  mounted() {
    this.setFood()
  }

  setLocation() {
    this.foods=Food
  }

  onChange() {
    this.$emit('changeFood', this.selected)
  }
}
</script>

<style lang="scss" scoped>
.create {
  padding: 16px;
    &_text {
      width: 100%;
      box-sizing: border-box;
      background: white;
      option:first {
        color: #c7ced7;
      }
    }
  }
}
select {
  width: 100%;
  background: url(../selectbox.svg) no-repeat;
}
</style>
```

```ここに言語を入力
// food.json
[
  {
    "name": "卵",
    "value": {
      "id": 1,
      "best": 32,
    }
  },
  {
    "name": "ラー麺",
    "value": {
      "id": 2,
      "best": 21,
    }
  },
  {
    "name": "いちご",
    "value": {
      "id": 3,
      "best": 40,
    }
  },
```

Vue.js セレクトボックス　初期値　設定したい

messageIsShowがfalseの時はisShowのスタイルのcolorを緑色にしてあげたいです。
どう書いたらいいのでしょうか？
わかる人がいましたら教えて欲しいです。

```ここに言語を入力
<template>
  <div class="message">
    <p class="message_isShow">メッセージ</p>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'

@Component
export default class ApplyMessage extends Vue {
  @Prop({ type: Boolean, default: true }) messageIsShow: Boolean
}

</script>

<style lang="scss" scoped>
.message {
  background: #ffffff;
  flex: none;
  &_isShow {
    color: red;
  }
}
```

Vue.js 条件がfalseの時にスタイルを変更したい

現在はユーザー一覧という文字と(totalCount)のcolorが黒色になっています。
(totalCount)だけ赤色にしたいのですがどうしたらいいのでしょうか？
知識ある方ご教授お願いしたいです


```ここに言語を入力
  <div class="user">
    <p class="user-title">{{ `ユーザ一覧（${totalCount}）` }}</p>
  </div>


<style lang="scss" scoped>
.user{
  background-color: #ffffff;
  &-title {
    color: #000000;
  }
}
```

Vue.js 別スタイルを当てたい

Action.vueでシェアボタンを押すとシェアモーダルが表示されます。
同じようにindex.vueでもシェアモーダルを表示したく、シェアボタンを追加しモーダルを表示する処理をAction.vueからコピペしたのですが、なぜかモーダルが表示されません。
わかる人がいましたらご教授お願いします

```ここに言語を入力
// index.vue
      <div id="share-button" @click="onClickShare()">
        <img :src="shareImgUrl()" class="action-button-icon" />
        シェア
      </div>
```

```ここに言語を入力
// Action.vue
<template>
  <div v-if="isAppView()" class="action">
    <div id="share-button" @click="onClickShare()" class="action-button">
      <img :src="shareImgUrl()" class="action-button-icon" />
      シェア
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { Offer } from '@/offer/models/offer'
import { authStore } from '@/store'
@Component
export default class Action extends Vue {
  @Prop({ type: Object, required: true }) offer: Offer
  shareImgUrl() {
    return '/img/share.svg'
  }
  onClickShare() {
    this.$emit('onClickShare')
  }
  isAppView() {
    return (
      authStore.osType === 'android' ||
      authStore.osType === 'ios'
    )
  }
}
```