Component Composition & Prop Children

Dalam React, sebuah component tidak hanya dapat menerima data melalui atribut atau Props. Component juga dapat menerima konten yang ditempatkan di antara tag pembuka dan penutupnya.

Konsep ini disebut Component Composition dan salah satu fitur yang mendukungnya adalah prop khusus children.

1. Memahami Component Composition

Component Composition adalah teknik menyusun component dengan cara menempatkan component atau konten lain di dalam sebuah component.

Contohnya:

<TabButton>Components</TabButton>

Pada contoh tersebut, Components berada di antara:

<TabButton>

dan:

</TabButton>

React akan menyediakan konten tersebut melalui prop khusus bernama children.

2. Apa Itu Prop `children`?

children adalah prop khusus yang secara otomatis diberikan React kepada sebuah component ketika component tersebut digunakan dengan konten di antara tag pembuka dan penutup.

Contoh:

<TabButton>Components</TabButton>

React akan meneruskan:

children = "Components"

ke component TabButton.

Dengan demikian, kita dapat mengambilnya menggunakan destructuring:

function TabButton({ children }) {
  // ...
}

3. Menggunakan `children` pada Component

Misalnya kita memiliki component TabButton.

File:

src/components/TabButton.jsx

Kita dapat membuatnya seperti berikut:

export default function TabButton({ children }) {
  return (
    <li>
      <button>{children}</button>
    </li>
  );
}

Prop children kemudian ditampilkan di dalam <button>:

<button>{children}</button>

4. Menggunakan Component dengan `children`

Di App.jsx, component dapat digunakan seperti berikut:

import TabButton from "./components/TabButton.jsx";

function App() {
  return (
    <main>
      <section id="examples">
        <h2>Examples</h2>

        <menu>
          <TabButton>Components</TabButton>
          <TabButton>JSX</TabButton>
          <TabButton>Props</TabButton>
          <TabButton>State</TabButton>
        </menu>
      </section>
    </main>
  );
}

export default App;

Setiap teks yang berada di antara tag <TabButton> akan menjadi nilai children.

Contohnya:

<TabButton>Components</TabButton>

menghasilkan:

children = "Components"

Sedangkan:

<TabButton>JSX</TabButton>

menghasilkan:

children = "JSX"

5. `children` Tidak Hanya Berisi Teks

Salah satu kelebihan children adalah isinya tidak terbatas pada string.

children juga dapat berupa elemen JSX atau component lain.

Contoh:

<TabButton>
  <strong>Components</strong>
</TabButton>

Maka children berisi:

<strong>Components</strong>

Component TabButton tetap dapat merendernya:

export default function TabButton({ children }) {
  return (
    <li>
      <button>{children}</button>
    </li>
  );
}

Hasilnya, elemen <strong> akan dirender di dalam <button>.

6. `children` Membuat Component Lebih Fleksibel

Tanpa children, kita mungkin membuat component seperti:

function TabButton({ label }) {
  return (
    <li>
      <button>{label}</button>
    </li>
  );
}

Penggunaannya:

<TabButton label="Components" />

Pendekatan ini cocok jika component hanya membutuhkan sebuah nilai tertentu.

Namun, dengan children:

function TabButton({ children }) {
  return (
    <li>
      <button>{children}</button>
    </li>
  );
}

kita dapat menulis:

<TabButton>Components</TabButton>

atau:

<TabButton>
  <strong>Components</strong>
</TabButton>

Sehingga component menjadi lebih fleksibel terhadap konten yang diterima.

7. `children` sebagai Composition

Konsep ini disebut Component Composition karena sebuah component dapat menerima dan menampilkan component atau konten lain di dalamnya.

Contoh sederhana:

<Card>
  <h2>Product</h2>
  <p>Product description</p>
</Card>

Component Card dapat dibuat:

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

Dengan demikian, Card tidak perlu mengetahui secara spesifik konten apa yang akan berada di dalamnya.

8. Contoh Composition yang Lebih Kompleks

children dapat berisi beberapa elemen sekaligus.

<Card>
  <h2>Laptop</h2>
  <p>High performance laptop.</p>

  <button>
    Buy Now
  </button>
</Card>

Component:

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

Semua elemen yang berada di dalam <Card> akan diterima sebagai children.

9. `children` vs Props Biasa

Ada dua pendekatan yang umum digunakan untuk memberikan konten kepada component.

Menggunakan Prop Biasa

<TabButton label="Components" />

Component:

function TabButton({ label }) {
  return (
    <button>
      {label}
    </button>
  );
}

Menggunakan `children`

<TabButton>
  Components
</TabButton>

Component:

function TabButton({ children }) {
  return (
    <button>
      {children}
    </button>
  );
}

Keduanya valid. Perbedaannya terletak pada cara component dirancang dan jenis data yang ingin diterima.

10. Kapan Menggunakan `children`?

children sangat cocok ketika component berfungsi sebagai wrapper atau container.

Contohnya:

<Card>
  <h2>Title</h2>
  <p>Description</p>
</Card>

<Modal>
  <h2>Confirmation</h2>
  <p>Are you sure?</p>
</Modal>

<Panel>
  <UserProfile />
</Panel>

Dalam kasus seperti ini, component pembungkus tidak perlu mengetahui secara detail konten yang akan ditempatkan di dalamnya.

11. Kapan Menggunakan Prop Biasa?

Prop biasa lebih cocok jika component membutuhkan data atau konfigurasi tertentu.

Contohnya:

<CoreConcept
  title="Components"
  description="The core UI building block."
  image={componentsImg}
/>

Component CoreConcept memang membutuhkan property tertentu:

title
description
image

Karena itu, menggunakan Props biasa lebih jelas.

12. Perbandingan `children` dan Prop Biasa

Pendekatan	Contoh	Cocok Digunakan Ketika
`children`	`<Card>Content</Card>`	Component bertindak sebagai wrapper
Prop biasa	`<Button label="Save" />`	Component membutuhkan data tertentu
`children`	`<Modal><Form /></Modal>`	Konten di dalam component dapat bervariasi
Prop biasa	`<User name="Budi" />`	Component membutuhkan konfigurasi tertentu

13. `children` dengan Destructuring

Karena children merupakan bagian dari object Props, kita dapat mengambilnya menggunakan destructuring.

Cara langsung:

function Card({ children }) {
  return (
    <div>
      {children}
    </div>
  );
}

Alternatifnya, kita dapat menerima seluruh object Props:

function Card(props) {
  return (
    <div>
      {props.children}
    </div>
  );
}

Keduanya menghasilkan perilaku yang sama.

14. `children` Bersama Props Lain

children juga dapat digunakan bersama Props lainnya.

Contoh:

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

      <div>
        {children}
      </div>
    </div>
  );
}

Penggunaannya:

<Card title="Product">
  <p>Laptop dengan performa tinggi.</p>
  <button>Buy Now</button>
</Card>

Di sini:

title

merupakan Prop biasa, sedangkan:

children

berisi seluruh konten di dalam <Card>.

15. Hal Penting yang Perlu Diingat

Beberapa poin penting mengenai children:

children merupakan prop khusus yang disediakan React.
children berisi konten di antara tag pembuka dan penutup component.
children dapat berupa teks.
children dapat berupa elemen JSX.
children dapat berupa component lain.
children sangat berguna untuk membuat component yang reusable.
Component wrapper atau container sering menggunakan children.
Prop biasa lebih cocok untuk data atau konfigurasi tertentu.

Kesimpulan

Component Composition memungkinkan kita menyusun component dengan memasukkan konten atau component lain ke dalamnya.

Dengan prop children:

<TabButton>
  Components
</TabButton>

konten:

Components

dapat diterima oleh component:

function TabButton({ children }) {
  return (
    <button>
      {children}
    </button>
  );
}

Konsep ini membuat component menjadi lebih fleksibel, reusable, dan mudah dikomposisikan.

Secara sederhana:

Parent Component
       │
       │ children
       ▼
┌─────────────────┐
│ Wrapper         │
│                 │
│   Children      │
│                 │
└─────────────────┘

Gunakan children ketika component berfungsi sebagai wrapper dan konten di dalamnya dapat berubah-ubah. Gunakan Props biasa ketika component membutuhkan data atau konfigurasi tertentu.

1. Memahami Component Composition​

2. Apa Itu Prop children?​

3. Menggunakan children pada Component​

4. Menggunakan Component dengan children​

5. children Tidak Hanya Berisi Teks​

6. children Membuat Component Lebih Fleksibel​

7. children sebagai Composition​

8. Contoh Composition yang Lebih Kompleks​

9. children vs Props Biasa​

Menggunakan Prop Biasa​

Menggunakan children​

10. Kapan Menggunakan children?​

11. Kapan Menggunakan Prop Biasa?​

12. Perbandingan children dan Prop Biasa​

13. children dengan Destructuring​

14. children Bersama Props Lain​

15. Hal Penting yang Perlu Diingat​

Kesimpulan​

1. Memahami Component Composition

2. Apa Itu Prop `children`?

3. Menggunakan `children` pada Component

4. Menggunakan Component dengan `children`

5. `children` Tidak Hanya Berisi Teks

6. `children` Membuat Component Lebih Fleksibel

7. `children` sebagai Composition

8. Contoh Composition yang Lebih Kompleks

9. `children` vs Props Biasa

Menggunakan Prop Biasa

Menggunakan `children`

10. Kapan Menggunakan `children`?

11. Kapan Menggunakan Prop Biasa?

12. Perbandingan `children` dan Prop Biasa

13. `children` dengan Destructuring

14. `children` Bersama Props Lain

15. Hal Penting yang Perlu Diingat

Kesimpulan