Props dan State di React JS, Terlihat Mirip Tapi Berbeda
Banyak yang masih bingung perbedaan diantara props dan state di React JS, maka dari itu Saya ingin menjelaskan tentang apa perbedaan dari Props dan State di React JS.
Seperti yang kita ketahui, di dalam komponen memiliki 2 jenis data yaitu State dan Props. Saya akan menjelaskan satu per satu untuk mengetahui perbedaanya.
1. Props
Props adalah sebuah objek yang diberikan dari parent komponen. Ketika parent komponen membuat child komponen, maka akan membuat sebuah props (properti child komponen). Dan child komponen bisa menggunakan props yang diberikan oleh parent komponen, akan tetapi child komponen tidak bisa merubah apa yang diberikan oleh parent komponen. Agar lebih mudah untuk memahami, mari kita buat contohnya.
Misal Kita akan membuat 2 Komponen, agar mudah saya menamai komponennya dengan Parent dan Child. Di parent komponen kita akan mengirim 1 props yang akan diterima oleh child komponen, disini kita beri nama props yaitu ‘name’.
Setelah itu, kita bisa memanggil props yang kita buat sebelumnya di child komponen.
Jika dijalankan, maka akan tampil seperti di bawah ini.
2. State
Ketika props menyimpan sebuah data dari luar komponen, berbeda dengan state yang menyimpan sebuah data di dalam komponen. Data yang disimpan didalam state juga bisa berubah — ubah, berbeda dengan props yang tidak bisa diubah.
Cara membuat state yaitu didalam sebuah Constructor dan bisa disi dengan value yang diinginkan.
Mari kita buat contohnya agar lebih mudah untuk di pahami, lihat Screenshot dibawah ini.
Maka akan menampilkan hasil seperti dibawah ini.
3. Kesimpulan
Perbedaan dari props dan state ialah jika props dimiliki oleh parent komponen yang akan dipanggil di child komponen dan props juga hanya bersifat read-only yang artinya tidak dapat diubah sedangkan state dimiliki oleh komponen itu sendiri dan bisa diperbarui.
Sekian untuk artikel saya ini, semoga bermanfaat bagi anda. Jika ada kesalahan penulisan atau materi, mohon maaf karena saya masih dalam tahap pembelajaran. Bagikan artikel ini jika dirasa bermanfaat. Terima Kasih !
Salam Titik Koma (;)
