State

State merupakan sebuah objek, di mana kita menyimpan sebuah properti dari suatu nilai yang dimiliki oleh sebuah component. Ketika terjadi perubahan terhadap state, maka component-nya akan dirender kembali.

Jika props nilainya dapat ditentukan saat component digunakan, berbeda dengan state yang nilainya hanya dapat diubah di dalam class component.

State dibuat di dalam constructor pada class dari component yang dibuat.

constructor(props) {
    super(props);
    this.state = {
      nama : 'Fendy',
      umur : 19
    };
}

Dalam penulisan constructor, kita harus menyertakan props sebagai parameter dan menuliskan super(props) sebelum membuat state. Untuk mengubah property dari state sebaiknya digunakan function setState() agar component di-render ulang dan dapat menampilkan perubahan state.

Berikut merupakan contoh dari implementasi State beserta outputnya.

Agar lebih mudah memahaminya, kalian bisa melihat sumber kodenya di sini

Pada skrip di atas, component Salam memiliki state yang menyimpan data warna dan salam. State warna untuk menentukan warna teks dengan atribut style, dan state salam untuk menentukan kata salam yang digunakan. Selanjutnya dibuat 2 tombol yang masing-masing memanggil function gantiWarna dan gantiSalam ketika diklik.

Pada function gantiWarna dibuat array warna yang menyimpan data warna yang digunakan untuk mengubah state warna dengan function setState() secara acak dengan Math.random() . Pada function gantiSalam() dibuat array salam yang menyimpan data kata salam dalam berbagai bahasa daerah yang digunakan untuk mengubah state salam dengan function setState() secara acak dengan Math.random().

Next : Lifecylce (On Progress 🤩)

Previous : Component dan Props