Mengolah data input user (form) adalah pilar interaktivitas utama web modern. Di dalam React, form diatur menggunakan pola Controlled Components di mana state React menjadi sumber kebenaran tunggal (single source of truth).

Prinsip Controlled Component

Pada elemen form HTML biasa (seperti <input>), browser mengelola nilainya sendiri. Pada Controlled Component React, nilai elemen input didorong dari state, dan setiap perubahan nilai didorong menggunakan event handler onChange.

Implementasi Form Tambah Data (Create)

Berikut implementasi form sederhana dengan validasi data masukan sebelum payload dikirimkan ke REST API:

import { useState } from 'react';

export default function RegisterForm() {
  const [username, setUsername] = useState('');
  const [email, setEmail] = useState('');
  const [errorMsg, setErrorMsg] = useState('');

  const handleFormSubmit = (e: React.FormEvent) => {
    e.preventDefault(); // Stop reload halaman
    
    // Validasi Sederhana
    if (username.length < 3) {
      setErrorMsg('Username minimal harus 3 karakter.');
      return;
    }
    setErrorMsg('');

    // Payload data
    const payload = { username, email };
    console.log("Mengirim payload:", payload);

    // Kirim POST Request ke API
    fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      body: JSON.stringify(payload),
      headers: { 'Content-Type': 'application/json' }
    })
    .then(res => res.json())
    .then(data => alert('Data berhasil dikirim! ID: ' + data.id))
    .catch(err => console.error(err));
  };

  return (
    <form onSubmit={handleFormSubmit} className="p-6 bg-slate-50 dark:bg-zinc-900 rounded-xl space-y-4">
      <h3 className="text-lg font-bold">Pendaftaran User Baru</h3>
      
      {errorMsg && <div className="p-3 bg-red-100 text-red-700 rounded-lg text-sm">{errorMsg}</div>}

      <div className="flex flex-col gap-1">
        <label className="text-xs font-bold">Username</label>
        <input 
          type="text" 
          value={username} 
          onChange={(e) => setUsername(e.target.value)}
          className="p-2 border rounded-lg dark:bg-zinc-800"
          placeholder="cth: kaderdev"
        />
      </div>

      <div className="flex flex-col gap-1">
        <label className="text-xs font-bold">Email</label>
        <input 
          type="email" 
          value={email} 
          onChange={(e) => setEmail(e.target.value)}
          className="p-2 border rounded-lg dark:bg-zinc-800"
          placeholder="cth: dev@catatankader.com"
        />
      </div>

      <button type="submit" className="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white font-bold rounded-lg">
        Kirim Data
      </button>
    </form>
  );
}

Referensi Belajar Resmi

• React Docs: Input Component API