Apa Itu Props?

Menggunakan kembali component itu bagus, tetapi tiga bintang yang sama hanya berguna sampai batas tertentu. Props memungkinkan kamu meneruskan data ke dalam component, sehingga setiap salinannya bisa berbeda:

function Greeting({ name }) {
    return <p>Hello, {name}!</p>;
}

export default function App() {
    return (
        <div>
            <Greeting name="Ada" />
            <Greeting name="Alan" />
        </div>
    );
}

Di sini terjadi dua hal:

• Mengirim: props tampak seperti atribut: name="Ada"
• Menerima: komponen membongkarnya dalam daftar parameter ({ name }) dan menggunakannya di JSX seperti variabel lainnya

Komponen yang sama, data berbeda, output berbeda: Hello, Ada! dan Hello, Alan!. Props adalah cara komponen induk mengatur komponen turunannya.