Props React: Mengirim Data ke Komponen dengan Contoh

Props adalah input sebuah komponen React. Induk mengirimnya sebagai atribut di JSX, <UserCard name="Ada" online={true} />, dan komponen anak menerimanya sebagai satu objek, yang biasanya kamu ambil dengan destructuring di parameter fungsi. Props memungkinkan satu komponen menampilkan data yang berbeda setiap kali kamu memakainya.

function UserCard({ name, role, online }) {
    return (
        <div style={{ border: '1px solid #ddd', borderRadius: 8, padding: 10, marginBottom: 8 }}>
            <strong>{name}</strong> <span style={{ color: '#666' }}>{role}</span>
            <div style={{ color: online ? 'green' : '#999' }}>
                {online ? 'Online' : 'Offline'}
            </div>
        </div>
    );
}

export default function App() {
    return (
        <div>
            <UserCard name="Ada Lovelace" role="Engineer" online={true} />
            <UserCard name="Alan Turing" role="Researcher" online={false} />
            <UserCard name="Grace Hopper" role="Admiral" online />
        </div>
    );
}

UserCard yang sama merender tiga orang yang berbeda. Perhatikan yang terakhir: atribut tanpa nilai, online, berarti online={true}. Tambahkan kartu keempat dengan nama dan peranmu sendiri.

Mengirim dan membaca props

Kirim string dengan tanda kutip, dan nilai lainnya dengan kurung kurawal: angka, boolean, array, objek, fungsi, bahkan JSX.

<Product
    title="Desk lamp"
    price={39.5}
    inStock={false}
    tags={['light', 'office']}
    seller={{ name: 'Lumen', rating: 4.8 }}
/>

React mengumpulkan semua atribut ke dalam satu objek dan mengirimnya sebagai argumen pertama komponen. Kamu bisa membacanya sebagai props, atau langsung mengambil field yang kamu butuhkan di daftar parameter:

function Product(props) {
    return <h3>{props.title}</h3>;
}

function Product({ title, price, seller }) {
    return <h3>{title}, ${price} from {seller.name}</h3>;
}

Kedua versi menerima objek yang sama. Destructuring adalah gaya yang umum karena signature fungsinya jadi mendaftar persis props mana yang dipakai komponen itu.

Nilai default

Beri prop nilai default dengan nilai default destructuring JavaScript, = value. Nilai ini berlaku saat induk tidak mengirim prop itu, atau mengirim undefined. Nilai ini tidak berlaku untuk null, 0, false, atau '', yang merupakan nilai sungguhan.

function Button({ label = 'Click me', size = 'medium', color = '#2563eb' }) {
    const padding = { small: '2px 8px', medium: '6px 14px', large: '10px 20px' }[size];
    return (
        <button style={{ padding, background: color, color: 'white', border: 0, borderRadius: 6, margin: 4 }}>
            {label} ({String(size)})
        </button>
    );
}

export default function App() {
    return (
        <div>
            <Button />
            <Button label="Save" size="large" />
            <Button label="Undefined" size={undefined} />
            <Button label="Null" size={null} />
        </div>
    );
}

Tiga tombol pertama kembali ke nilai default-nya di tempat prop tidak dikirim atau bernilai undefined. Tombol terakhir mengirim null, jadi size benar-benar bernilai null, dan pencariannya tidak menemukan padding. Ganti size={null} menjadi size="small" untuk memperbaikinya.

Kode lama mengatur nilai default dengan property statis, Button.defaultProps = { size: 'medium' }. React 19 menghapus defaultProps untuk function component: JSX mengabaikannya pada fungsi, tanpa peringatan. Fitur ini masih berjalan di class component. Pakai nilai default destructuring.

Mengirim fungsi sebagai props

Data mengalir ke bawah: induk mengirim props ke anak-anaknya, tidak pernah sebaliknya. Saat komponen anak perlu memberi tahu induk bahwa sesuatu terjadi, induk mengirim sebuah fungsi, dan komponen anak memanggilnya. Menurut konvensi, props seperti ini dinamai onSomething.

import { useState } from 'react';

function Rating({ value, onRate }) {
    return (
        <div>
            {[1, 2, 3, 4, 5].map((n) => (
                <button key={n} onClick={() => onRate(n)} style={{ fontWeight: n === value ? 'bold' : 'normal' }}>
                    {n}
                </button>
            ))}
        </div>
    );
}

export default function App() {
    const [rating, setRating] = useState(0);

    function handleRate(n) {
        console.log('Rating picked a value:', n);
        setRating(n);
    }

    return (
        <div>
            <Rating value={rating} onRate={handleRate} />
            <p>{rating === 0 ? 'Not rated yet' : `You rated it ${rating} out of 5`}</p>
        </div>
    );
}

Rating tidak menyimpan apa pun. Ia menampilkan value yang diterimanya dan melaporkan klik lewat onRate. State-nya tinggal di App, yang mengirimnya kembali ke bawah. Kirim onRate={setRating} secara langsung alih-alih handleRate, dan hasilnya tetap berjalan: setter juga sebuah fungsi. Memindahkan state ke induk bersama seperti ini disebut lifting state up.

Spread props

Saat kamu sudah punya objek yang key-nya sesuai dengan props sebuah komponen, sebarkan dengan {...object} alih-alih menulis setiap atribut. Sintaks rest melakukan kebalikannya di daftar parameter: ambil beberapa props berdasarkan nama, kumpulkan sisanya, lalu teruskan.

function Avatar({ name, color, size }) {
    return (
        <span
            style={{ display: 'inline-grid', placeItems: 'center', width: size, height: size, borderRadius: '50%', background: color, marginInlineEnd: 6 }}
        >
            {name[0]}
        </span>
    );
}

function TextField({ label, ...inputProps }) {
    return (
        <label style={{ display: 'block', marginTop: 10 }}>
            {label} <input {...inputProps} />
        </label>
    );
}

export default function App() {
    const person = { name: 'Ada', color: '#fde68a', size: 40 };

    return (
        <div>
            <Avatar {...person} />
            <Avatar {...person} color="#bbf7d0" />
            <TextField label="Email" type="email" placeholder="you@example.com" maxLength={40} />
        </div>
    );
}

Avatar kedua menyebarkan person lalu mengatur color: saat prop yang sama muncul dua kali, yang belakangan menang, jadi taruh nilai pengganti setelah spread. TextField menyimpan label untuk dirinya sendiri dan langsung meneruskan type, placeholder, dan maxLength ke <input>. Pakai spread untuk wrapper seperti ini; di tempat lain, menuliskan props secara eksplisit membuat lebih mudah melihat apa yang diterima sebuah komponen.

Props bersifat read only

Sebuah komponen tidak boleh mengubah props-nya sendiri. Props milik induknya, dan objek yang sama bisa dipakai bersama. Perlakukan props seperti argumen fungsi yang tidak boleh kamu ubah:

function Counter({ count }) {
    count = count + 1; // wrong: changes a local copy, the parent never sees it
    return <p>{count}</p>;
}

function Profile(props) {
    props.name = 'Someone else'; // wrong: in development React freezes props, so this throws a TypeError
    return <p>{props.name}</p>;
}

Props tetap berubah seiring waktu. Saat induk merender lagi dengan nilai baru, komponen anak menerima objek props baru dan merender dengannya:

import { useState } from 'react';

function Temperature({ celsius }) {
    const fahrenheit = (celsius * 9) / 5 + 32;
    return (
        <p>
            {celsius}°C is {fahrenheit}°F, {celsius >= 25 ? 'warm' : 'cool'}.
        </p>
    );
}

export default function App() {
    const [celsius, setCelsius] = useState(20);

    return (
        <div>
            <input type="range" min={-10} max={40} value={celsius} onChange={(e) => setCelsius(Number(e.target.value))} />
            <Temperature celsius={celsius} />
            <button onClick={() => setCelsius(celsius + 5)}>Warmer</button>
        </div>
    );
}

Temperature tidak pernah mengubah celsius. Ia menghitung fahrenheit darinya di setiap render. Geser slider-nya, dan state milik induk berubah, jadi komponen anak mendapat prop baru. Jika komponen anak butuh nilai yang bisa diubahnya sendiri, nilai itu adalah state, bukan prop.

Props vs state

Props dan state sama-sama nilai JavaScript biasa yang memengaruhi apa yang dirender komponen, dan perubahan pada salah satunya membuat komponen dirender lagi. Perbedaannya ada pada siapa pemilik nilainya.

Nilai yang sama sering kali menjadi keduanya. Di contoh suhu di atas, celsius adalah state di App dan prop di Temperature. Pemiliknya menyimpannya sebagai state dan mengirimnya ke bawah sebagai prop, bersama fungsi untuk mengubahnya saat komponen anak membutuhkannya.

Sebuah prop bisa menampung nilai apa pun, termasuk JSX dan komponen. Mengirim elemen seperti icon={<StarIcon />} memungkinkan induk mengisi sebuah slot di komponen anak, ide yang sama dengan children tetapi dengan nama pilihanmu.

Prop children

Apa pun yang kamu taruh di antara tag pembuka dan penutup sebuah komponen datang sebagai prop bernama children. Begitulah cara membuat wrapper seperti kartu, panel, dan layout yang tidak tahu isinya sejak awal:

function Panel({ title, children }) {
    return (
        <section style={{ border: '1px solid #ddd', borderRadius: 8, padding: 12, marginBottom: 8 }}>
            <h4 style={{ margin: '0 0 8px' }}>{title}</h4>
            {children}
        </section>
    );
}

export default function App() {
    return (
        <div>
            <Panel title="About">
                <p>Panels can hold any JSX.</p>
            </Panel>
            <Panel title="Links">
                <ul>
                    <li>Props</li>
                    <li>State</li>
                </ul>
            </Panel>
        </div>
    );
}

Halaman children membahas cara mengirim beberapa slot dan bekerja dengan children secara aman.

Key bukan props

key terlihat seperti atribut, tetapi React menyimpannya untuk dirinya sendiri guna mencocokkan item list di antara render. Komponen tidak pernah menerimanya:

function Row(props) {
    console.log('Row props.key =', String(props.key), 'props.id =', props.id);
    return <li>{props.label}</li>;
}

export default function App() {
    const fruits = [
        { id: 'a1', label: 'Apple' },
        { id: 'b2', label: 'Banana' },
    ];

    return (
        <ul>
            {fruits.map((fruit) => (
                <Row key={fruit.id} id={fruit.id} label={fruit.label} />
            ))}
        </ul>
    );
}

Konsol menampilkan props.key sebagai undefined dan props.id dengan nilai yang sebenarnya. Saat komponen anak butuh identifier-nya, kirim sekali lagi dengan nama lain, seperti yang dilakukan id di sini. Build development juga memberi peringatan saat kamu membaca props.key; pratinjau berjalan seperti build production, jadi kamu hanya melihat undefined.