Assalamualaikum wr wb. Halo guys kembali lagi dengan saya Haikal. Kali ini saya akan sharing materi tentang state pada react js. Langsung saja kita bahas.
State
src:https://miro.medium.com/max/1200/1*hYSKyofnqThnPIsYRfnUUQ.png |
React component memiliki built-in state yang dimana ketika kalian mengirimkan values yang dimiliki sebuah component. Ketika state berubah, maka component akan di re-render.
Kita coba buat terlebih dahulu state objectnya:
Greet.component.js
Kalian dapat menambahkan property pada state sesuka kalian atau sebanyak apapun.
Sekarang kita gunakan pada component itu juga untuk mencetaknya:
Hasilnya:
Untuk mengubah value dari state tersebut, kita tidak dapat langsung mengubahnya dengan this.state.property tapi sebagai gantinya kita dapat menggunakan setState. Misalkan kita punya function untuk mengubahnya:
Greet.component.js
dan sebuah event yang men-triggernya agar terlihat perbedaannya:
Ketika button tersebut di click ia akan memanggil function changeDay yang didalamnya terdapat setState untuk mengubah hari. Hasilnya:
Sebelum click:
Sesudah click:
Perbedaan antara props dan state ada pada dimana ia di definisikan. props berada diluar component dan state berada di dalam component tersebut.
Ini dia source code fullnya:
Greet.component.js
Mungkin sekian saja untuk materi kali ini, mohon maaf bila ada kesalahan. Wassalamualaikum wr wb.
Komentar
Posting Komentar