Belajar React Dasar #5: State & useState

• Apa Itu State?
• Apa Itu useState?
• Membuat State Dasar
• State dengan Angka (Counter)
• State Menyimpan Array atau Object
• Kesimpulan

Halo teman-teman semuanya, pada artikel sebelumnya kita sudah membahas tentang Props, yaitu cara mengirim data dari parent ke child component.

Pada artikel kali ini, kita akan membahas tentang State dan useState. Konsep ini sangat penting karena dengan state, kita bisa menyimpan dan mengelola data di dalam sebuah component.

Apa Itu State?

State adalah data internal pada sebuah component yang bisa berubah seiring interaksi pengguna.

Berbeda dengan props yang dikirim dari luar, state dikelola langsung oleh component itu sendiri. Jika state berubah, maka React akan otomatis merender ulang (re-render) UI agar sesuai dengan data terbaru.

Apa Itu useState?

useState adalah Hook bawaan React yang digunakan untuk membuat dan mengelola state di dalam functional component.

Fungsi ini mengembalikan sebuah array dengan 2 nilai:

1. state → nilai data saat ini.
2. setState → fungsi untuk mengubah nilai state.

Sintaks dasar:

const [state, setState] = useState(initialValue);

Membuat State Dasar

Mari kita buat contoh sederhana untuk menampilkan teks dan mengubahnya saat tombol ditekan.

import { useState } from "react";

function App() {
  const [message, setMessage] = useState("Halo, React!");

  return (
    <div>
      <h1>{message}</h1>
      <button onClick={() => setMessage("State telah berubah!")}>
        Ubah Pesan
      </button>
    </div>
  );
}

export default App;

Penjelasan:

• Kita import useState dari React.
• message adalah state dengan nilai awal "Halo, React!".
• setMessage digunakan untuk mengubah nilai state.
• Saat tombol ditekan, nilai message berubah menjadi "State telah berubah!".

State dengan Angka (Counter)

Contoh paling umum dari penggunaan state adalah membuat counter.

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Tambah</button>
      <button onClick={() => setCount(count - 1)}>Kurangi</button>
    </div>
  );
}

export default App;

Penjelasan:

• State count diinisialisasi dengan nilai awal 0.
• Saat tombol Tambah diklik, nilai count bertambah 1.
• Saat tombol Kurangi diklik, nilai count berkurang 1.

State Menyimpan Array atau Object

State tidak hanya bisa menyimpan string atau angka, tapi juga array atau object.

Contoh: menyimpan daftar todo sederhana.

import { useState } from "react";

function App() {
  const [todos, setTodos] = useState(["Belajar React", "Belajar JSX"]);

  const addTodo = () => {
    setTodos([...todos, "Belajar State"]);
  };

  return (
    <div>
      <h1>Daftar Todo:</h1>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
      <button onClick={addTodo}>Tambah Todo</button>
    </div>
  );
}

export default App;

Penjelasan:

• State todos menyimpan array berisi string.
• Fungsi addTodo menambahkan item baru ke dalam array menggunakan spread operator (...).
• Daftar todo ditampilkan menggunakan .map().

Kesimpulan

Pada artikel ini, kita sudah belajar tentang State dan useState di React. Kita sudah mencoba membuat state sederhana, menggunakan state untuk angka (counter), hingga menyimpan array dan object di dalam state.

Di artikel berikutnya, kita akan membahas tentang Event Handling, yaitu bagaimana cara menangani interaksi pengguna seperti klik, input, dan lain-lain.

Terima kasih