React入門 練習問題 56：Reactコンポーネント間のprops受け渡しとエラー解決
次のReactアプリケーションでエラーが表示されました。コードを見て、最も考えられる原因は何ですか？
**エラーメッセージ:**
```
TypeError: Cannot read property 'name' of undefined
```
**コード:**
```jsx
import React from 'react';
function App() {
const userData = { name: 'John Doe', email: 'john@example.com' };
return (
<div className="app">
<h1>ユーザープロフィール</h1>
<UserCard />
</div>
);
}
function UserCard(props) {
return (
<div className="user-card">
<h2>{props.user.name}</h2>
<p>{props.user.email}</p>
</div>
);
}
```
- UserCardコンポーネントにuserプロパティが渡されていない
- userDataオブジェクトのプロパティ名が間違っている
- propsの構文が正しくない
- divタグのクラス名が無効
- JSXの中でコンポーネント名の大文字小文字が間違っている
Qraftユーザーの成績：正答率 60%（6/10回正解）
正解と解説を見る
このエラーは、UserCardコンポーネントを呼び出す際にuserプロパティを渡していないことが原因です。
【正解の理由】
`<UserCard />`ではuserプロパティが渡されていないため、コンポーネント内の`props.user`はundefinedになり、`undefined.name`にアクセスしてエラーになります。`<UserCard user={userData} />`のように渡す必要があります。
【不正解の理由】
• userDataオブジェクトのプロパティ名が間違っている：userDataは{ name, email }を正しく持っており、プロパティ名に誤りはない
• propsの構文が正しくない：`function UserCard(props)`や`props.user.name`という書き方自体に構文的な誤りはない
• divタグのクラス名が無効：classNameの指定は正しく書かれており、エラーの原因はCSSやクラス名ではない
• JSXの中でコンポーネント名の大文字小文字が間違っている：`UserCard`は正しく大文字始まりで記述されており、コンポーネントとして認識されている