値の受け渡し（props）

ポイント

• props は、コンポーネントに渡す「注文」。HTML の属性と同じように書く
• 受け取る側は、関数の引数で受け取る。function Greeting({ name }) { ... }
• 受け取った props は書き換えない。変えたいときは、渡す側が変える

試してみよう

function Greeting({ name }: { name: string }) {
  return <p>こんにちは、{name} さん</p>
}

export default function App() {
  return (
    <div style={{ padding: 16 }}>
      <Greeting name="田中" />
      <Greeting name="佐藤" />
    </div>
  )
}

1. 3人目の Greeting を足してみよう
2. Greeting に age（年齢）も渡して、「〇歳」と表示してみよう（ヒント：{ name, age }）
3. name を渡し忘れると、どうなるか試してみよう

つまずきポイント