Prop Children

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

Satu prop bersifat khusus. Tulis komponen dengan tag pembuka DAN penutup, lalu apa pun yang kamu letakkan di antaranya akan diterima sebagai prop children:

function Card({ children }) {
    return <div className="card">{children}</div>;
}

<Card>
    <p>Any content!</p>
</Card>

Card tidak tahu atau peduli dengan isi di dalamnya: Card hanya membungkusnya dalam kotak bergaya. Wrapper seperti card, modal, dan layout semuanya menggunakan children: parent menyediakan kontennya, component menyediakan bingkainya.

Tantangan

Sedang

Buat bingkai card yang dapat digunakan kembali.

Buat Card merender <div> dengan className="card" yang menampilkan children.
Di App, gunakan <Card>...</Card> untuk membungkus <p> dengan id="card-text" dan teks Welcome aboard.

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>