3-2. Propsで値を渡す

Propsの基本を学びます

React - 第1章: React基礎 - コンポーネントとJSX

📚

関連する教科書第1章: React基礎 - コンポーネントとJSX

課題：Propsで値を渡そう

Props（プロップス）を使うと、親コンポーネントから子コンポーネントにデータを渡せます。これにより、同じコンポーネントを異なるデータで再利用できます。

やること

1.UserCard コンポーネントを作る
2.Propsで name と age を受け取る
3.「名前: 〇〇」「年齢: 〇〇歳」と表示する
4.App で2つの UserCard を表示

Propsの書き方

Propsは関数の引数として受け取ります：

// Propsを受け取る
function UserCard(props) {
  return (
    <div>
      <p>名前: {props.name}</p>
      <p>年齢: {props.age}歳</p>
    </div>
  );
}

// Propsを渡す
<UserCard name="太郎" age={25} />

分割代入を使うともっとシンプルに書けます：

function UserCard({ name, age }) {
  return (
    <div>
      <p>名前: {name}</p>
      <p>年齢: {age}歳</p>
    </div>
  );
}

ポイント：文字列は "太郎"、数値は {25} のように波括弧で囲みます。

期待される出力

名前: 太郎
年齢: 25歳

名前: 花子
年齢: 23歳

function UserCard(/* ここにpropsを受け取る */) {
  return (
    <div style={{ marginBottom: '20px', padding: '10px', border: '1px solid #ddd', borderRadius: '5px' }}>
      {/* ここにnameとageを表示 */}
      
    </div>
  );
}

function App() {
  return (
    <div>
      {/* 太郎さん（25歳）のUserCardを表示 */}
      
      {/* 花子さん（23歳）のUserCardを表示 */}
      
    </div>
  );
}

export default App;

Open Sandbox

← 前のレッスン: 3-1. シンプルなコンポーネントを作る

次のレッスン: 3-4. リストをmapで表示する →