Update Objek dalam State

State dapat menyimpan segala jenis nilai JavaScript, termasuk objek. Tetapi kita tidak boleh mengubah objek yang ada dalam state secara langsung.

Jika ingin memperbarui objek, kita perlu membuat yang baru (atau membuat salinan dari yang sudah ada), lalu ubah state dengan menggunakan salinan tersebut. Untuk lebih jelasnya disini kita akan jelaskan cara update objek dalam state. Dokumen resmi perihal ini bisa dibaca disini.

Saya beri comment satu function saja , yaitu function handleFirstNameChange. Terlihat disini kita menggunakan Spread Syntax (tanda titik 3x) yang artinya salin semua object yang lama dan ubah field yang diinginkan saja. Dalam function ini yang ingindiubah adalah hanya firstName saja

import { useState } from 'react';

export default function Form() {
	const [person, setPerson] = useState({
		firstName: "Chandra",
		lastName: "Mulyana",
		email: "chandra.mulyana@outlook.com",
	});

	// Copy Object sebelumnya dengan spread syntax (...)
  function handleFirstNameChange(e) {
		// copy semua object di state person
		// ubah yang firstname nya saja
		setPerson({
			...person,
			firstName: e.target.value,
		});
  }

	function handleLastNameChange(e) {
		setPerson({
			...person,
			lastName: e.target.value,
		});
	}

	function handleEmailChange(e) {
		setPerson({
			...person,
			email: e.target.value,
		});
	}

	return (
		<>
			<label>
				First name:
				<input
					value={person.firstName}
					onChange={handleFirstNameChange}
				/>
			</label>
			<label>
				Last name:
				<input
					value={person.lastName}
					onChange={handleLastNameChange}
				/>
			</label>
			<label>
				Email:
				<input value={person.email} onChange={handleEmailChange} />
			</label>
			<p>
				{person.firstName} {person.lastName} ({person.email})
			</p>
		</>
	);
}