propsの使い方がよく理解できない

Question

前提・実現したいこと

propsの使い方がよく理解できないです。

該当のソースコード

import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'
import './index.css'

const User = () =>{
  const users =[
    {name:"Tom",age:"20",adress:"NY"},
    {name:"John",age:"34",adress:"CF"},
    {name:"Juddy",age:"42",adress:"LN"}
  ]
  return(
    <div>
      <h1>ユーザー</h1>
      <table className="user">
      <thead>
        <tr><th>名前</th><th>年齢</th><th>住所１</th><th>住所２</th></tr>
      </thead> 
      <tbody>
        <UserItem user={users[0]} />
        <UserItem user={users[1]} />
        <UserItem user={users[2]} />
      </tbody>
      </table>
    </div>
  )
}

const UserItem = (props) =>{
  const { name,age,adress} = props.users
  return (
      <tr>
        <td>{name}</td>
        <td>{age}</td>
        <td>{adress}</td>
        <td></td>
      </tr>  
    )
  }
}

UserItem.propTypes ={
  users:PropTypes.object.isRequired
}

ReactDOM.render(
  <User />,
  document.getElementById('root')
)

というコードがあります。

const UserItem = (props) =>{
  const { name,age,adress} = props.users
  return (
      <tr>
        <td>{name}</td>
        <td>{age}</td>
        <td>{adress}</td>
        <td></td>
      </tr>  
    )
  }
}

の部分に対して質問です。

const { name,age,adress} = props.users

のprops.usersでなぜUserコンポーネントのusers配列を使えるのでしょうか？
スコープは関係ないのでしょうか？
また、

UserItem.propTypes ={
  users:PropTypes.object.isRequired
}

のusersはconst users　の配列のことでしょうか？

Answer 1

こんにちは。

ご質問に挙げられているコンポーネント const UserItem の 本体一行目、

const { name,age,adress} = props.users

の右辺 props.users はおそらくタイポで props.user ならば正しいです。（users の "s" が不要）

同様に UserItem.propTypes の中の

users:PropTypes.object.isRequired

も　users ではなくて、 user であれば正しいです。

ご質問のコードは、何かに掲載されているサンプルコードでしょうか？
もしそうであれば、オリジナルのものを今一度ご確認されるとよろしいかもしれません。

---

補足1

タイプミスと思える箇所がもうひとつあります。ご質問に挙げられているコード

の最後に } がひとつ余分です。

補足2

参考までに、
user とすべきところが users になっている2箇所と、上記の余分な } を削除して
動作するようにしたものを以下に作成しました。

https://jsfiddle.net/jun68ykt/168mkpb2/3/

Comments

[reactsan]

ありがとうございます。ご指摘の通りusersはuserでした！しかしこのuserは何のuserなのでしょうか？もしお分かりでしたら宜しくお願いします

[jun68ykt]

@reactsanさん

> ご指摘の通りusersはuserでした！

とのことで、良かったです！

> このuserは何のuserなのでしょうか？

との疑問についてですが、確かに　user と書いてあると、何か具体的なユーザ情報を
この props名の user が意味しているように思えてしまいますね。

ですが、この　user　は、UserItemの単なる props のひとつですので、
user でなければならない、わけではありません。

たとえば、 profile (プロフィール）でもよいですし、personalData でもよいです。

以下は personalData にしてみたソースです。

https://jsfiddle.net/jun68ykt/168mkpb2/6/

配列、
const users =[
{name:"Tom",age:"20",adress:"NY"},
{name:"John",age:"34",adress:"CF"},
{name:"Juddy",age:"42",adress:"LN"}
]
の各要素を受け渡しするための propsとして機能すればよいので、その名前が
user でなければならない、ということはありません。とはいえ、たとえば data
だとかcontent だと、漠然としているので、何らか、人物の属性が入っている
props名をつけるのが望ましいです。

上記で回答になっていますでしょうか？

[reactsan]

ありがとうございます。とてもわかりやすかったです。