ReactJS #7: State – Data yang Bisa Berubah

ReactJS #7: State

Data yang Bisa Berubah
(Seperti Emosi Kita yang Bisa Berubah-ubah)

Halo, teman kecil React! 🧒

Kamu pasti punya perasaan yang bisa berubah-ubah, kan? Kadang senang, kadang sedih, kadang marah, kadang terkejut. Nah, di React juga ada data yang bisa berubah-ubah seperti emosi kita. Data itu namanya state.

😊 → 😢 → 😡 → 😲
Emosi kita berubah, state juga bisa berubah!

🔎 Apa Itu State?

State adalah data yang disimpan di dalam komponen dan bisa berubah seiring waktu. Kalau props itu seperti oleh-oleh dari induk yang tidak bisa diubah, state itu seperti perasaan kita sendiri yang bisa kita ubah.

Contoh state:

• Angka pada counter (bisa ditambah atau dikurang).
• Teks yang sedang diketik di kotak input.
• Apakah sebuah kotak dicentang atau tidak.
• Data dari API yang baru datang.

Setiap kali state berubah, komponen akan di-render ulang (digambar ulang) dengan nilai state yang baru. Makanya tampilan bisa berubah secara otomatis.

🎣 Menggunakan State dengan Hook useState

Untuk menggunakan state, kita perlu "kail pancing" khusus yang namanya useState. Ini adalah salah satu Hook di React (alat bantu). Cara pakainya:

import { useState } from 'react'; function KomponenKita() { const [nilai, setNilai] = useState(awal); // nilai adalah state saat ini // setNilai adalah fungsi untuk mengubah state // awal adalah nilai awal state }

Contoh paling sederhana: counter (penghitung).

🧪 Contoh 1: Counter (Penghitung) Sederhana

Buat file baru Counter.js di folder src, lalu tulis:

import { useState } from 'react'; function Counter() { // Deklarasi state 'angka' dengan nilai awal 0 const [angka, setAngka] = useState(0); // Fungsi untuk menambah angka function tambah() { setAngka(angka + 1); } // Fungsi untuk mengurangi angka function kurang() { setAngka(angka - 1); } // Fungsi untuk mereset angka function reset() { setAngka(0); } return ( <div style={{ textAlign: 'center', padding: '20px' }}> <h2>Counter: {angka}</h2> <button onClick={tambah}>➕ Tambah</button> <button onClick={kurang}>➖ Kurang</button> <button onClick={reset}>🔄 Reset</button> </div> ); } export default Counter;

Kemudian di App.js, impor dan gunakan komponen Counter:

import Counter from './Counter'; function App() { return ( <div> <h1>Belajar State dengan Counter</h1> <Counter /> </div> ); }

Jalankan proyekmu (npm start), maka akan muncul tombol-tombol yang bisa mengubah angka. Setiap kali tombol diklik, angka berubah dan tampilan langsung menyesuaikan. Itulah keajaiban state!

💡 Penting: Jangan mengubah state secara langsung seperti angka = angka + 1. Harus selalu pakai fungsi pengubah (setAngka) agar React tahu bahwa state berubah dan perlu menggambar ulang.

📝 Contoh 2: Input Teks dengan State

Buat komponen InputNama.js:

import { useState } from 'react'; function InputNama() { const [nama, setNama] = useState(''); function handleChange(event) { setNama(event.target.value); } return ( <div style={{ padding: '20px', backgroundColor: '#e1f5fe', borderRadius: '30px' }}> <h3>Masukkan Namamu:</h3> <input type="text" value={nama} onChange={handleChange} placeholder="Ketik di sini..." /> <p>Halo, <strong>{nama || '...'}!</strong> Senang bertemu denganmu! 😊</p> </div> ); } export default InputNama;

Penjelasan:

• value={nama} – nilai input dikendalikan oleh state nama.
• onChange={handleChange} – setiap kali ada ketikan, fungsi dipanggil dan state diperbarui.
• event.target.value – mengambil teks terbaru dari input.

Coba tambahkan ke App.js dan lihat hasilnya. Setiap ketikan akan langsung muncul di bawah input.

🎭 Latihan: Aplikasi Mood (Perasaan) Sederhana

Sekarang kita buat aplikasi yang bisa mengubah mood (emosi) kita. Buat komponen Mood.js dengan ketentuan:

• State awal: mood = "😊" (senang).
• Ada tiga tombol: "Senang", "Sedih", "Marah".
• Saat tombol diklik, mood berubah sesuai emoji yang dipilih.
• Tampilkan emoji besar di tengah.

Kerangka kode (coba isi sendiri bagian yang ???):

import { useState } from 'react'; function Mood() { const [mood, setMood] = useState('😊'); function gantiMood(emoji) { ??? // isi dengan setMood } return ( <div style={{ textAlign: 'center', padding: '20px' }}> <div style={{ fontSize: '8em' }}>{mood}</div> <button onClick={() => gantiMood('😊')}>Senang</button> <button onClick={() => gantiMood('😢')}>Sedih</button> <button onClick={() => gantiMood('😡')}>Marah</button> </div> ); }

Kalau bingung, jawabannya: setMood(emoji);.

Tambahkan juga tombol untuk mood "Terkejut" (😲) dan "Ceria" (🥳).

💡 Catatan: Di tombol kita menggunakan onClick={() => gantiMood('😊')} karena kita perlu memanggil fungsi dengan argumen. Jika kita tulis onClick={gantiMood('😊')} maka fungsi akan langsung dipanggil saat render, bukan saat diklik. Jadi harus pakai fungsi panah.

📦 Beberapa State dalam Satu Komponen

Kita bisa punya banyak state dalam satu komponen. Cukup panggil useState berkali-kali:

const [nama, setNama] = useState(''); const [umur, setUmur] = useState(0); const [warnaFavorit, setWarnaFavorit] = useState('biru');

Masing-masing state berdiri sendiri dan bisa diatur dengan setternya masing-masing.

🚀 Kesimpulan

• State adalah data yang bisa berubah di dalam komponen.
• Gunakan useState untuk membuat state: const [nilai, setNilai] = useState(awal).
• Jangan mengubah state langsung, selalu pakai fungsi setter.
• Saat state berubah, komponen akan di-render ulang dengan nilai baru.
• Kita bisa punya banyak state dalam satu komponen.

Di artikel selanjutnya kita akan belajar tentang Menangani Event lebih dalam, dan juga kombinasi state dengan form. Sampai jumpa!

Lanjut ke ReactJS #8: Menangani Event ▶

✨ State itu seperti emosi – berubah-ubah, dan itu wajar! ✨