Controlled Input: value + onChange
Di HTML biasa, elemen input menyimpan datanya sendiri secara diam-diam. Di React, kita 'mengikat' input tersebut ke dalam state agar React memegang kendali penuh — inilah yang disebut Controlled Input. Kenapa harus begitu? Agar data form selalu tersinkronisasi di satu tempat (Single Source of Truth) dan mudah divalidasi setiap kali kamu mengetik. Dengan begitu, kamu bisa langsung menampilkan pesan error 'password terlalu pendek' secara real-time.
👀 Contoh dulu
<input value={name} onChange={(e) => setName(e.target.value)} />Hasilnya: Input terikat sempurna dengan state nama secara real-time.
💡 e.target.value mengambil nilai string terbaru dari elemen input.
📝 Sekarang giliranmu
Buatlah sebuah elemen <input> teks yang dikendalikan (controlled). Kaitkan nilainya dengan state text dan perbarui nilainya pada event onChange.