State adalah sebuah objek yang digunakan dalam komponen React untuk menyimpan data yang dapat diubah-ubah. State digunakan untuk mengontrol kondisi dan perilaku komponen dan dapat digunakan untuk mengubah tampilan komponen. State dapat diubah melalui fungsi setState() yang disediakan oleh React, yang akan memicu render ulang komponen dengan state yang baru.
Hal penting tentang React state
Ada beberapa hal yang perlu diketahui tentang state di React:
- State hanya dapat digunakan dalam komponen yang diturunkan dari React.Component.
- State harus diinisialisasi saat komponen dibuat, biasanya dalam konstruktor komponen.
- State tidak boleh diubah secara langsung, tetapi harus menggunakan fungsi
setState()yang disediakan oleh React. - Setiap kali state diubah, React akan menjalankan render ulang komponen untuk menampilkan perubahan.
- State dapat digunakan untuk mengontrol perilaku komponen, seperti menampilkan atau menyembunyikan elemen, atau untuk menyimpan data yang diterima dari server.
- State yang di-passing dari komponen parent ke komponen child melalui props. Namun, state yang di-passing dari child ke parent harus melalui callback function yang didefinisikan di parent.
Contoh implementasi React state
Untuk membuat state di class component React, kita harus menggunakan konstruktor komponen untuk menginisialisasi state. Di dalam konstruktor, kita dapat menetapkan nilai awal state dengan menetapkan properti this.state dengan objek yang berisi data yang ingin kita simpan. Sebagai contoh:
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0,
message: "Hello"
};
}
// ...
}
Di atas adalah contoh komponen yang memiliki state yang diinisialisasi dengan properti count dengan nilai 0 dan message dengan nilai "Hello". Kita dapat mengakses state dari dalam komponen dengan menggunakan this.state.
Jika kita menginginkan class component menjadi functional component, kita dapat menggunakan hook useState untuk membuat state.
import { useState } from 'react';
function MyComponent(props) {
const [count, setCount] = useState(0);
const [message, setMessage] = useState("Hello");
// ...
}
Di atas adalah contoh component yang memiliki state yang diinisialisasi dengan properti count dengan nilai 0 dan message dengan nilai "Hello" dengan menggunakan hook useState.
Menggunakan state pada komponen input
Untuk menggunakan state pada input komponen, kita harus menyimpan nilai input dalam state dan mengupdate state saat nilai input berubah.
Pada class component, kita dapat menggunakan onChange event pada input untuk mengupdate state saat nilai input berubah. Kita dapat mengatur properti value dari input ke this.state.inputValue dan mengatur onChange untuk menjalankan this.handleChange yang akan memanggil setState() untuk mengupdate state.
class MyInput extends React.Component {
constructor(props) {
super(props);
this.state = {
inputValue: ""
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({ inputValue: event.target.value });
}
render() {
return (
<input
value={this.state.inputValue}
onChange={this.handleChange}
/>
);
}
}
Pada functional component, kita dapat menggunakan hook useState untuk menyimpan nilai input dalam state dan mengupdate state saat nilai input berubah. Kita dapat mengatur properti value dari input ke inputValue dan mengatur onChange untuk menjalankan handleChange yang akan memanggil setInputValue untuk mengupdate state.
import { useState } from 'react';
function MyInput() {
const [inputValue, setInputValue] = useState("");
function handleChange(event) {
setInputValue(event.target.value);
}
return (
<input
value={inputValue}
onChange={handleChange}
/>
);
}
Menggunakan state untuk conditional rendering
Kita dapat menggunakan state untuk mengontrol kondisi rendering pada komponen React. Misalnya, jika kita ingin menampilkan atau menyembunyikan elemen berdasarkan kondisi tertentu, kita dapat menggunakan state untuk menyimpan kondisi tersebut dan menggunakannya dalam logika pada render() method untuk menentukan apa yang harus ditampilkan.
Pada class component, kita dapat menggunakan if-else statement atau ternary operator untuk mengontrol kondisi rendering. Sebagai contoh:
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
showMessage: true
};
}
render() {
return (
<div>
{this.state.showMessage ? <p>Hello</p> : null}
</div>
);
}
}
Pada contoh di atas, komponen akan menampilkan elemen <p>Hello</p> jika showMessage di state bernilai true. Jika false, maka tidak akan tampil apapun.
Pada functional component, kita dapat menggunakan if-statement atau ternary operator untuk mengontrol kondisi rendering. Sebagai contoh:
import { useState } from 'react';
function MyComponent() {
const [showMessage, setShowMessage] = useState(true);
return (
<div>
{showMessage ? <p>Hello</p> : null}
</div>
);
}
Menggunakan state untuk menyimpan data dari axios request
Kita dapat menggunakan state untuk menyimpan data yang didapat dari request axios. Pertama, kita harus mengimpor library axios dan membuat request ke endpoint yang diinginkan.
Pada class component, kita dapat menggunakan lifecycle method componentDidMount() untuk mengirim request dan mengupdate state dengan data yang didapat. Sebagai contoh:
import axios from 'axios';
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
data: null
};
}
componentDidMount() {
axios.get("https://your-api-endpoint.com/data")
.then(response => {
this.setState({ data: response.data });
});
}
render() {
return (
<div>
{this.state.data ? <p>Data: {this.state.data}</p> : <p>Loading...</p>}
</div>
);
}
}
Pada functional component, Anda dapat menggunakan hook useEffect untuk mengirim request dan mengupdate state dengan data yang didapat. Sebagai contoh:
import { useState, useEffect } from 'react';
import axios from 'axios';
function MyComponent() {
const [data, setData] = useState(null);
useEffect(() => {
axios.get("https://your-api-endpoint.com/data")
.then(response => {
setData(response.data);
});
}, []);
return (
<div>
{data ? <p>Data: {data}</p> : <p>Loading...</p>}
</div>
);
}
Menggunakan async-await
Kita dapat menggunakan async-await untuk mengirim request axios dan menyimpan data yang didapat dalam state. Ini dapat membuat kode kita lebih mudah dibaca dan diatur.
Pada class component berikut contohnya:
import axios from 'axios';
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
data: null
};
}
async componentDidMount() {
try {
const response = await axios.get("https://your-api-endpoint.com/data");
this.setState({ data: response.data });
} catch (error) {
console.log(error);
}
}
render() {
return (
<div>
{this.state.data ? <p>Data: {this.state.data}</p> : <p>Loading...</p>}
</div>
);
}
}
Jika implementasinya menggunakan functional component, berikut contohnya:
import { useState, useEffect } from 'react';
import axios from 'axios';
function MyComponent() {
const [data, setData] = useState(null);
useEffect(() => {
const fetchData = async () => {
try {
const response = await axios.get("https://your-api-endpoint.com/data");
setData(response.data);
} catch (error) {
console.log(error);
}
};
fetchData();
}, []);
return (
<div>
{data ? <p>Data: {data}</p> : <p>Loading...</p>}
</div>
);
}
Sekian tulisan kita kali ini, untuk lebih realistisnya kita bisa mencoba beberapa kode diatas langsung menggunakan repl atau menuliskannya di project lokal yang sedang kita kerjakan.
Semoga Bermanfaat!