2. Props Children

Dalam React, props children adalah salah satu cara untuk mengirimkan konten (elemen atau komponen) di antara tag pembuka dan penutup sebuah komponen. Dengan menggunakan props children, kita dapat membuat komponen yang memiliki konten dinamis di dalamnya.

A. Membuat Props Children

app/component/Note.tsx

import { ReactNode } from "react";

type status = "warning" | "error" | "success";
interface SectionProps {
  title: string;
  children: ReactNode;
  status: status;
}

const Note: React.FC<SectionProps> = ({ title, status, children }) => {
  return (
    <section className=" border border-red-500 mt-5 rounded-lg  shadow-md px-2">
      <div className="border-b border-red-500  py-2 ">
        <h5 className="font-bold text-red-500"> {title}</h5>
      </div>
      <div className="py-3 text-red-500 text-sm">{children}</div>
    </section>
  );
};

export default Note;

Note

Tipe Data untuk children adalah ReactNode

Kode di atas adalah contoh bagaimana membuat props children. Pada props children kita bisa memberikan konten apapu bersifat dinamis. Konten tersebut dapat berupa elemen HTML biasa, komponen-komponen React atau bahkan teks atau angka.

Penggunaan umum dari props children adalah dalam pembuatan komponen layout yang fleksibel dan reusable, di mana konten komponen akan berbeda pada setiap penggunaannya.

2. Memanggil pada komponen app

app/page.tsx

import Button from "./component/Button";
import Latihan from "./component/latihan";
import Note from "./component/Note";

const Home = () => {
  return (
    <main>
      <h1>Hello World</h1>
      <Latihan
        name="ihsan"
        username="ihsanabuhanifah"
        age={30}
        isVerified={true}
      />
      <Button title="Simpan" isDisabled={false} />
      <Button title="cancel" isDisabled={true} />
      <Note title="Belajar ReactJS" status='warning' >
        <p>Saya belajar React</p>
      </Note>
      <Note title="Belajar TypeScript" status='warning' >
        <div className="bg-blue-500">
          <p className="text-white">Saya sedang belajar TypeScript</p>
        </div>
      </Note>

      <Note title="Belajar NestJS" status='warning' >
        <div className="bg-green-500">
          <p className="text-white">Saya sedang belajar NestJS untuk menjadi backend developer</p>
        </div>
      </Note>
    </main>
  );
};

export default Home;

3. Jalankan pada Browser