Setelah beberapa waktu yang lalu bahas bagaimana caranya passing value dengan props, sekarang bakal coba bahas tentang State pada React.

Dari hasil saya mencari tahu di dokumentasi dan beberapa kursus online, state adalah informasi yang diakses dalam satuan waktu dan state berubah secara terus menerus atau bisa dibilang bahwa sifatnya dinamis pada sebuah komponen.

Dan menurut yang saya baca dari laman dokumentasi milik react, perbedaan antara props dengan state adalah seperti ini.

Jadi props atau properties dan state sebenarnya hanyalah objek biasa atau sederhana dari JavaScript. Ketika keduanya sama-sama memiliki informasi yang mempengaruhi keluaran atau output render, namun sebenarnya mereka itu berbeda. Dimana props akan diberikan kepada sebuah komponen sedangkan state ini dikelola didalam komponen. Yang mana seperti variabel yang dideklarasikan didalam sebuah fungsi.

State ini sifatnya hanya berada di satu komponen saja. Apabila datanya ingin dikirimkan, bisa dikirimkan menggunakan props. Dan apabila ingin merubah data yang ada didalam state, bisa menggunakan method setState().

Saya akan membuat sebuah contoh implementasi state dimana akan menampilkan sebuah jam yang berjalan secara real-time diatas tulisan Hello friends! This is Bagas personal website melanjutkan dari artikel sebelumnya yang ini.

Pertama saya akan membuat sebuah file baru dengan nama Clock.js pada folder components. Kemudian mengimport React terlebih dahulu dengan menambahkan import React from 'react' pada baris pertama.

Lalu saya membuat sebuah kelas komponen yang saya beri nama Clock.

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }

  render() {
    return (
      <h2>It is {this.state.date.toLocaleTimeString()}</h2>
    )
  }
}

saya juga menambahkan method render dan menambahkan sebuah konstruktor dimana didalamnya berisi state yang akan kita gunakan pada komponen ini. Saya mengambil datanya dari method Date() yang ada pada JavaScript.

Kemudian saya tampilkan dalam tag h2 yang ada didalam method render. Ditampilkan dengan cara memanggil state berisi data dari method Date() yang ada didalam konstruktor.

Lalu dibaris terakhir saya mengekspor komponen Clock tersebut supaya dapat dipakai di komponen yang lain. Dengan menuliskan export default Clock.

Saya mengimport komponen Clock dan memanggil komponen tersebut diatas tag paragraf yang digunakan untuk menampilkan kalimat Hello friends! This is Bagas personal website.

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Clock from './components/Clock'; <- Disini

function App(props) {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <Clock /> <- Disini
        <p>
          {props.hello}
        </p>
      </header>
    </div>
  );
}

export default App;

Maka akan menjadi seperti ini.

Namun, jamnya masih statis dan nilainya berubah hanya ketika kita muat ulang (refresh) halamannya.

Kali ini saya akan mencoba membuat detiknya akan terus berjalan.

Cara menambahkan method componentDidMount() dan componentWillUnmount() dan sebuah method bernama tick pada Clock.js.

Method componentDidMount() dan componentWillUnmount() termasuk kedalam Component Lifecycle Method. Dimana method componentDidMount() dieksekusi ketika sebuah komponen dibuat dan dimuat kedalam DOM (Document Object Model) sedangkan untuk componentWillUnmount() dieksekusi ketika komponen tersebut dihapus dari DOM.

Lalu method yang saya beri nama tick ini berisikan method setState() yang digunakan untuk mengupdate nilai pada state.

Maka akan jadi seperti ini.

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }

  componentDidMount() {
    this.timerID = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timerID)
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <h2>It is {this.state.date.toLocaleTimeString()}</h2>
    )
  }
}

Lalu tampilannya akan menjadi seperti ini.

Nah, itu tadi sedikit tentang state. Semoga mudah dipahami dan bisa bermanfaat.

Thanks sudah mampir!