← React24 / 78

Form Multi-field dengan 1 State Object

Menangani banyak input form dapat dilakukan dengan 1 state objek menggunakan properti [e.target.name]: e.target.value.

👀 Contoh dulu

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

Hasilnya: Konsol mencatat state objek form diperbarui, misal: { username: 'budi', age: 20 }

💡 Pastikan setiap elemen input memiliki atribut 'name' yang cocok dengan key di state form.

📝 Sekarang giliranmu

Di dalam fungsi handler input, perbarui state form dengan mempertahankan nilai-nilai yang ada sebelumnya, lalu perbarui hanya field yang memicu event secara dinamis menggunakan sintaks array (computed property).

Preview
← SebelumnyaBerikutnya →