• Apa Itu Form di React?
• Controlled Component
• Uncontrolled Component
• Perbedaan Controlled vs Uncontrolled
• Form dengan Beberapa Input
• Kesimpulan

Halo teman-teman semuanya, pada artikel sebelumnya kita sudah belajar tentang List & Keys, bagaimana cara menampilkan data array menggunakan map() dan pentingnya key agar React dapat melakukan update UI dengan lebih efisien.

Pada artikel kali ini, kita akan membahas tentang Form di React, khususnya perbedaan antara Controlled Component dan Uncontrolled Component. Topik ini penting karena hampir semua aplikasi pasti melibatkan form, misalnya untuk login, registrasi, atau input data.

Apa Itu Form di React?

Form adalah elemen HTML seperti <input>, <textarea>, dan <select> yang digunakan untuk menerima input dari pengguna.

Di React, ada dua cara utama untuk mengelola form:

1. Controlled Component → nilai input dikendalikan oleh state di React.
2. Uncontrolled Component → nilai input langsung diambil dari DOM menggunakan ref.

Controlled Component

Controlled Component artinya setiap input form selalu terhubung dengan state di React.

import { useState } from "react";

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

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`Nama: ${name}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Masukkan nama"
      />
      <button type="submit">Kirim</button>
    </form>
  );
}

export default App;

Penjelasan:

• State name menyimpan nilai input.
• Atribut value={name} membuat input selalu mengikuti state.
• Event onChange mengupdate state saat pengguna mengetik.
• Saat submit, kita bisa langsung menggunakan nilai dari state.

Uncontrolled Component

Uncontrolled Component artinya nilai input tidak disimpan di state, tetapi diambil langsung dari DOM menggunakan ref.

import { useRef } from "react";

function App() {
  const nameRef = useRef();

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`Nama: ${nameRef.current.value}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={nameRef} placeholder="Masukkan nama" />
      <button type="submit">Kirim</button>
    </form>
  );
}

export default App;

Penjelasan:

• Kita menggunakan useRef untuk membuat referensi ke elemen input.
• Nilai input diakses melalui nameRef.current.value.
• Input ini tidak terikat pada state, sehingga React tidak mengontrol nilainya.

Perbedaan Controlled vs Uncontrolled

Form dengan Beberapa Input

Controlled Component biasanya dipakai untuk form dengan banyak input.

import { useState } from "react";

function App() {
  const [form, setForm] = useState({ email: "", password: "" });

  const handleChange = (e) => {
    setForm({ ...form, [e.target.name]: e.target.value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Email: ${form.email}, Password: ${form.password}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        name="email"
        placeholder="Masukkan email"
        value={form.email}
        onChange={handleChange}
      />
      <input
        type="password"
        name="password"
        placeholder="Masukkan password"
        value={form.password}
        onChange={handleChange}
      />
      <button type="submit">Login</button>
    </form>
  );
}

export default App;

Penjelasan:

• Kita menyimpan data form dalam state object { email, password }.
• Event onChange menangani semua input dengan setForm({ ...form, [e.target.name]: e.target.value }).
• Data form bisa digunakan saat submit.

Kesimpulan

Pada artikel ini, kita sudah belajar tentang Form di React. Kita mengenal perbedaan antara Controlled Component yang menggunakan state React untuk mengontrol nilai input, dan Uncontrolled Component yang mengambil nilai langsung dari DOM dengan ref.

Controlled Component lebih sering digunakan di React modern karena lebih mudah dikelola dan divalidasi, terutama pada form yang kompleks.

Terima kasih