State merupakan data yang dimiliki oleh suatu component yang dapat kita ubah nilainya, untuk lebih jelasnya, silahkan simak penjelasan berikut
Sebelumnya kita sudah mengenal props, props merupakan nilai yang diberikan kepada suatu component ketika component tersebut digunakan. Setelah props diterima, maka component tersebut tidak bisa mengubah nilai yang ada di dalam props.
Namun terkadang suatu component perlu melakukan update pada data yang dimilikinya. Beberapa contoh data yang perlu diupdate yaitu :
textValue
pada componentTextInput
time
pada componentTimer
clickCount
pada componentButton
State merupakan data suatu component yang boleh diubah. Nilai dari state ditentukan sendiri oleh suatu component, berbeda dengan props yang datanya ditentukan oleh component lain.
Setelah nilai dari state diinisialisasi oleh suatu component, maka nilai dari state tersebut bisa diubah - ubah oleh component itu sendiri.
State dan component memiliki keterkaitan satu sama lain, yaitu :
- Component akan menginisialisasi nilai dari state yang dimilikinya
- User akan mentrigger event untuk mengupdate nilai dari state
- Saat nilai dari state berubah, maka component yang memiliki state tersebut akan dirender ulang dengan nilai dari state yang sudah terupdate.
Kesimpulannya adalah, tampilan dari suatu component akan berubah apabila statenya berubah
Sebelum state dapat digunakan, kita perlu membuatnya terlebih dahulu
import React, {Component} from 'react'
export default class MyComponent extends Component {
// membuat attribute state pada class MyComponent
state = {
namaState1: 'nilai state',
namaState2: 5
}
render() {
return <div>My Component</div>
}
}
Untuk mengakses nilai suatu state, kita dapat mengaksesnya secara langsung menggunakan this
this.state.namaState1
this.state.namaState2
Untuk mengupdate state kita menggunakan method setState()
this.setState({
namaState1: value,
namaState2: value
})
Setelah kita menjalankan setState()
maka component tersebut akan langsung dirender ulang secara otomatis
Disini kita akan merubah component Button
yang sudah pernah kita buat sebelumnya dengan menambahkan state clickCount
yang akan bertambah setiap kali component Button
diklik
// Button.js
import React, { Component } from 'react'
class Button extends Component {
// inisiasi state
state = {
clickCount: 0
}
// update state clickCount
addClickCount = () => {
this.setState({
clickCount: this.state.clickCount + 1
})
}
// tampilkan state clickCount
render() {
return (
<div>
<p>Jumlah klik : {this.state.clickCount}</p>
<button onClick={addClickCount}>Klik Saya</button>
</div>
)
}
}
export default Button