2つのProps

CoddyのReactジャーニー「基本概念」セクションの一部 — レッスン 18/42。

コンポーネントは通常、複数のプロパティを受け取ります。分割代入でそれらをすべて列挙し、JSX 内で組み合わせます。

function Product({ name, price }) {
    return <p>{name} costs ${price}</p>;
}

<Product name="Laptop" price={999} />
// renders: Laptop costs $999

型に注目してください。name は文字列（引用符）であり、price は数値（波括弧）です。数値を数値として保持することは、それらを使って計算を行う際に重要になります。

チャレンジ

簡単

ショップ用の製品ラインを作成します。

Product が name と price の props を受け取り、その段落内に {name} costs ${price} をレンダリングするようにします。
App 内で、name に Laptop、price に 999（数値として！）を指定して Product を1つレンダリングします。ページに Laptop costs $999 と表示される必要があります。

自分で試してみよう

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>