問題一覧に戻る
初級Props
問題16: Propsの型

Propsにはさまざまな型のデータを渡すことができます。文字列、数値、真偽値、オブジェクト、配列など、それぞれの型の扱い方を学びます。

function UserInfo({ 
  name,      // 文字列のprop
  age,       // 数値のprop
  isPremium, // 真偽値のprop
  address,   // オブジェクトのprop
  hobbies    // 配列のprop
}) {
  return (
    <div>
      <h2>{name}</h2>
      <p>年齢: {age}歳</p>
      <p>会員: {isPremium  "プレミアム"  "無料"}</p>
      <p>住所: {address.}, {address.}</p>
      <p>趣味: {hobbies.(", ")}</p>
    </div>
  );
}

function App() {
  return (
    <UserInfo 
      name="田中"
      age={}
      isPremium={}
      address={{ city: "東京", country: "日本" }}
      hobbies={["読書", "映画", "料理"]}
    />
  );
}

export default App;
···