Forms & Controlled Components — CompileDaily Study

Penjelasan

Controlled component adalah pola di mana nilai input form SEPENUHNYA dikendalikan oleh state React — value input diisi dari state, dan tiap perubahan (onChange) langsung mengupdate state itu. Pola ini membuat React selalu jadi "single source of truth" untuk nilai form, bukan DOM.

Contoh Konsep

import { useState } from 'react';

function FormNama() {
    const [nama, setNama] = useState('');

    return (
        <div>
            <input
                type="text"
                value={nama}
                onChange={(e) => setNama(e.target.value)}
            />
            <p>Halo, {nama}!</p>
        </div>
    );
}

Praktikum

Buat controlled component dengan input email (state email, awalnya string kosong) dan input umur (state umur, tipe number). Tampilkan ringkasan "Email: {email}, Umur: {umur}" di bawah kedua input.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Untuk input type="number", nilai e.target.value SELALU berupa STRING (bukan number asli) — kalau butuh operasi matematika dari nilainya, ubah dulu dengan Number(e.target.value) sebelum dipakai, kalau tidak akan terjadi penggabungan string, bukan penjumlahan.