Langsung ke konten utama

Belajar React #3 — Memahami State & Event Handling (React Mulai Hidup!)

Pada artikel sebelumnya saya sudah belajar membuat project React, memahami JSX, component, dan props. Pada tahap itu, UI masih bersifat statis.

Mulai artikel ini, React akan terasa semakin menarik karena saya mulai belajar bagian penting yang membuat UI menjadi dinamis: State & Event Handling.

1. Apa Itu State dalam React?

State adalah data internal yang disimpan oleh sebuah component. Berbeda dengan props yang dikirim dari luar, state dikelola di dalam component dan dapat berubah seiring interaksi.

Ketika state berubah → React otomatis me-render ulang tampilan terkait.

React menyediakan hook bernama useState untuk membuat state.

Contoh dasar:

import { useState } from "react";

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

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

export default Counter;

Penjelasan singkat:

  • count → nilai state

  • setCount → fungsi untuk mengubah state

  • useState(0) → nilai awal state adalah 0

Ketika tombol diklik, angka akan bertambah.

2. Event Handling: Membuat UI Bereaksi

Event handling adalah cara React merespons aksi pengguna: klik, input, hover, submit, dll.

React menggunakan sintaks seperti HTML tetapi dengan gaya JavaScript:

  • onClick

  • onChange

  • onSubmit

Contoh sederhana:

<button onClick={handleClick}>Klik Saya</button>

Event handler adalah fungsi JavaScript biasa.

3. Studi Kasus Praktikal: Membuat Counter Interaktif

Mari praktik membuat component "Counter" untuk memahami konsep dengan jelas.

Langkah 1 — Buat file component

src/components/Counter.jsx

Isi file

import { useState } from "react";

function Counter() {
    const [value, setValue] = useState(0);

    function increment() {
        setValue(value + 1);
    }

    function decrement() {
        setValue(value - 1);
    }

    return (
        <div>
            <h2>Counter</h2>
            <p>Nilai: {value}</p>
            <button onClick={decrement}>-</button>
            <button onClick={increment}>+</button>
        </div>
    );
}

export default Counter;

Langkah 2 — Panggil di App.jsx

import Counter from "./components/Counter";


function App() {
  return (
    <div>
      <h1>Belajar State & Event Handling</h1>
      <Counter />
    </div>
  );
}


export default App;

Coba klik tombolnya — angka akan berubah.



4. Studi Kasus Tambahan: Input Form Sederhana

State juga digunakan untuk menangani form.

Buat file:

src/components/FormName.jsx

Isi file:

import { useState } from "react";

function FormName() {
    const [name, setName] = useState("");


    return (
        <div>
            <h2>Form Nama</h2>
            <input
            type="text"
            placeholder="Masukkan nama..."
            value={name}
            onChange={(e) => setName(e.target.value)}
            />


            <p>Halo, {name || "..."}</p>
        </div>
    );
}


export default FormName;
Penjelasan:

  • value={name} menjadikan input sebagai controlled component

  • onChange mengubah state berdasarkan input pengguna

Kemudian dipanggil di App.jsx seperti ini : 

import FormName from "./components/FormName";


function App() {
  return (
    <div>
      <h1>Belajar State & Event Handling</h1>
      <FormName />
    </div>
  );
}


export default App;

Hasilnya seperti ini 



5. Kesalahan yang Sering Saya Temui

❌ State tidak berubah padahal memanggil setState

Biasanya karena:

  • menggunakan variabel state lama tanpa memanggil fungsi updater

  • salah penempatan hook (useState harus di level teratas function)

❌ Event tidak berjalan

Biasanya karena:

  • lupa menulis onClick={}

  • salah penulisan nama event (harus camelCase)

❌ Error: Invalid hook call

Terjadi jika:

  • memanggil useState bukan di dalam component

  • menggunakan React versi ganda

6. Hasil Belajar Hari Ini

Di artikel ini saya sudah mempraktikkan:

  • Apa itu state dan kenapa penting

  • Cara menggunakan useState

  • Event handling (onClick, onChange)

  • Membuat Counter interaktif

  • Membuat input form dinamis

UI React sekarang tidak hanya tampil, tapi bereaksi terhadap tindakan pengguna.

Artikel Selanjutnya

Belajar React #4 — Conditional Rendering & List Rendering

Di artikel berikutnya saya akan belajar bagaimana menampilkan daftar data, memetakan array dengan .map(), dan menampilkan UI secara kondisional.

Sampai jumpa di artikel selanjutnya! 🚀

Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Cara Efektif Menggunakan StringGrid

StringGrid merupakan salah satu VCL yang sangat berguna. Jika anda sudah familiar dengan Webbased Application, anda bisa analogikan StringGrid dengan Table. Table digunakan untuk meenampilkan data. Adapun StringGrid, selain sebagai komponen untuk menampilkan data, dia juga juga bisa sebagai tempat untuk memasukkan data, lihat gambar di bawah ini : Pada gambar di atas, saya menampilkan form jurnal umum sebagai contoh penggunaan StringGrid. Pada contoh di atas, stringgrid dipakai untuk memasukkan data item jurnal berupa Kode dan nama perkiraan, status Debet/Kredit dan Nominal. Untuk memanfaatkan Stringgrid saya mempunyai beberapa konstanta yang mencerminkan nomor urut kolom, misalnya _KolKode merujuk pada kolom Kode Perkiraan, _KolNama merujuk pada kolom Nama. Lebih jelasnya lihat baris kode berikut : Const _KolKode : Integer = 0; _KolNama : Integer = 1; _KolDK : Integer = 2; _KolNominal : Integer = 3; Konstanta-konstanta tersebut saya pakai di beberapa tempat. Diantaran...
4 komentar
Baca selengkapnya

Tanda-tanda programmer buruk

Dalam dunia pekerjaan, ada berbagai cara untuk menjadi tidak efektif. Berikut adalah beberapa perilaku yang sering terjadi pada beberapa programmer yang pernah saya kerjakan selama bertahun-tahun: "Saya Seorang Insinyur Perangkat Lunak, Bukan Programmer"  Anda tahu seperti apa mereka. Mereka membawa keyboard mekanis ke kantor? Mereka tidak bisa ikut dalam pertemuan harian karena terlalu sibuk memikirkan masalah tersebut (hanya butuh 5 menit untuk menyampaikan apa yang Anda pikirkan). Berapa lama waktu yang dibutuhkan untuk mendapatkan latte? Saya tidak begitu yakin bagaimana seseorang bisa menjadi begitu sombong dengan pengalaman 3 tahun, tapi begitulah adanya. Saya suka mengesankan orang dengan gelar pekerjaan saya. Siapa? Apa maksud Anda, tidak ada yang peduli. Mungkin sebaiknya Anda menghabiskan lebih banyak waktu untuk bekerja dan sedikit waktu untuk memikirkan status Anda? Papan Tulis di Belakang  Beberapa orang di industri ini memiliki gelar. Saya pernah bekerja deng...
Posting Komentar
Baca selengkapnya

Singleton Pattern

Motivasi Kadang ada keadaan di mana kita hanya boleh memiliki satu instan dari suatu kelas. Sebagai contoh, kita hanya boleh memiliki satu window manager (atau satu sistem file atau satu spooler printer) pada satu aplikasi. Biasanya singleton digunakan untuk managemen sumber daya internal maupun eksternal secara terpusat dan bisa diakses dimanapun. Singleton merupkan salah satu design pattern yang paling sederhana. Singleton hanya melibatkan satu kelas yang bertanggung jawab untuk menginstansiasi dirinya sendiri dan pada saat yang bersamaan menyediakan akses secara global terhadap instan tersebut. Pada pattern singleton, instan bisa diakses dari manapun tanpa harus memanggil contructor dari kelas instan tersebut Tujuan • Memastikan bahwa satu kelas hanya bisa dibuat instannya sekali. • Menyediakan akses secara global terhadap instan singleton tersebut. Implementasi Pada bahasa pemrograman Java, implementasi dari singleton adalah dengan membuat sebuah atribut static pada...
Posting Komentar
Baca selengkapnya