Dinamis dengan Props

    Dalam React, "props" adalah singkatan dari "properties" (sifat atau properti). Props adalah mekanisme untuk melewatkan data dari satu komponen ke komponen lain sebagai argumen. Props ini bersifat read-only, artinya komponen yang menerima props tidak dapat mengubah nilai props tersebut. Props digunakan untuk mentransfer data dari komponen induk ke komponen anak, memungkinkan komponen tersebut untuk dinamis dan dapat digunakan kembali dengan nilai yang berbeda-beda. Dengan props, Anda dapat membuat komponen React yang fleksibel dan dapat diatur ulang sesuai kebutuhan aplikasi.

Syntak dasar dari Props adalah {props.name} atau {this.props.name}.

Untuk lebih jelasnya, mari kita terapkan props pada component yang telah kita buat sebelumnya, yaitu HelloWorld.

Langkah pertama :

Buka file HelloWorld.js yang telah kita pelajari kemarin, lalu ubah codenya menjadi seperti ini :

Kemudian update file di App.js menjadi seperti ini :

Maka hasilnya akan menjadi seperti berikut ini :

Kita juga dapat menambahkan lebih dari 1 props, Misalnya seperti ini :

    *Keterangan : Ditambahkan 2 props yaitu {this.props.namaDepan} dan {this.props.namaBelakang}

Jangan lupa update lagi file di App.js menjadi seperti ini :

Setelah Itu maka hasilnya akan menjadi seperti ini :

Semoga tutorial ini membantu memahami konsep dasar props dalam React dan memberikan Anda landasan yang kuat untuk membangun komponen-komponen yang dinamis dan modular. Terima kasih telah membaca! Semoga sukses selalu!