Satu Sumber Kebenaran di React

Untuk semua data yang dapat berubah dalam aplikasi React harus ada satu sumber kebenaran. Maksud dari kata-kata ini adalah jika Anda memiliki dua state dan satu state dapat dihitung melalui state yang lain - berarti satu dari state tersebut berlebihan dan perlu dihapus.

Mari kita bahas ini dengan sebuah contoh. Misalkan Anda, contohnya, memiliki dua input: di input pertama dimasukkan suhu dalam derajat Fahrenheit, dan di input kedua - dalam derajat Celcius. Pada saat yang sama, kita ingin agar kedua input tersinkronisasi: saat memasukkan suhu di satu input, suhu tersebut harus berubah secara sesuai di input kedua.

Pendekatan yang salah adalah membuat dua state: satu untuk suhu Fahrenheit, dan yang kedua - untuk Celcius. Mengapa salah: karena satu suhu dihitung dari suhu yang lain, yang berarti sebagai tempat penyimpanan data harusnya hanya ada satu state.

Tulislah implementasi dari tugas yang dijelaskan.

Seorang programmer menulis kode yang menampilkan jumlah elemen array:

function getSum(arr) {
	let res = 0;
	
	for (let elem of arr) {
		res += +elem;
	}
	
	return res;
}

function Calculator() {
	const [value, setValue] = useState('');
	const [nums, setNums] = useState([1, 2, 3]);
	const [sum, setSum] = useState(6); // jumlah elemen array nums
	
	function handleChange(event) {
		setValue(event.target.value);
	}
	
	function handleBlur(event) {
		setNums([...nums, event.target.value]); // menambahkan elemen ke array
		setSum(getSum([...nums, event.target.value])); // menghitung ulang jumlahnya
	}
	
	return <div>
		<p>{sum}</p>
		<input value={value} onChange={handleChange} onBlur={handleBlur} />
	</div>;
}

Apa yang salah dengan kode ini? Perbaiki kode tersebut.

Seorang programmer menulis kode untuk mengedit elemen array:

function App() {
	const [notes, setNotes] = useState([1, 2, 3, 4, 5]);
	const [editNum, setEditNum] = useState(null);
	const [value, setValue] = useState('');
	
	const result = notes.map((note, index) => {
		return <p key={index} onClick={() => startEdit(index)}>
			{note}
		</p>;
	});
	
	function startEdit(index) {
		setEditNum(index);
		setValue(notes[index]); // menulis teks elemen yang diedit ke state terpisah
	}
	
	function changeItem(event) {
		setValue(event.target.value);
		setNotes([...notes.slice(0, editNum), event.target.value,...notes.slice(editNum + 1)]);
	}
	
	return <div>
		{result}
		<input value={value} onChange={changeItem} />
	</div>;
}

Apa yang salah dengan kode ini? Perbaiki kode tersebut.