Form Sederhana

Form = Client Component

Form butuh mengingat ketikan, jadi ditulis sebagai Client Component ("use client"). Rumusnya ada tiga bagian:

1. State untuk menyimpan isi input.
2. onChange pada input: setiap ketikan masuk ke state.
3. onSubmit pada form: dijalankan saat tombol Kirim ditekan.

"use client";
import { useState } from "react";

export default function BukuTamu() {
  const [nama, setNama] = useState("");
  const [daftar, setDaftar] = useState([]);

  function kirim(e) {
    e.preventDefault();          // cegah halaman reload
    setDaftar([...daftar, nama]); // tambah nama baru
    setNama("");                  // kosongkan input
  }
  // ...
}

Dua trik yang perlu diingat

• e.preventDefault() mencegah browser memuat ulang halaman saat form dikirim.
• [...daftar, nama] membuat array baru berisi isi lama + nama baru. Jangan pakai push pada state.

Next.js juga punya Server Actions untuk mengirim form langsung ke server. Itu topik lanjutan; fondasinya sama dengan yang kamu pelajari di sini.