Dua Props

Termasuk bagian Dasar-Dasar dalam perjalanan React di Coddy. Pelajaran 18 dari 42.

Komponen biasanya menerima beberapa props. Cantumkan semuanya dalam destructuring dan gabungkan ke dalam JSX:

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

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

Perhatikan tipe datanya: name adalah string (tanda kutip), price adalah angka (kurung kurawal). Menyimpan angka sebagai angka penting saat kamu menghitung dengannya.

Tantangan

Mudah

Buat lini produk untuk toko.

Buat Product menerima props name dan price, lalu menampilkan {name} costs ${price} di paragrafnya.
Di App, tampilkan satu Product dengan name Laptop dan price 999 (sebagai angka!). Halaman harus menampilkan Laptop costs $999.

Coba sendiri

<!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>