En vir resnice v React

Za vse spremenljive podatke v React-aplikaciji mora obstajati en vir resnice. S temi besedami mislimo, da če imate dve stanji in je eno stanje mogoče izračunati iz drugega - potem je eno od stanj odveč in ga je treba odstraniti.

Razpravljajmo o tem na primeru. Recimo, da imate, na primer, dva vnosna polja: v prvo se vnese temperatura v stopinjah Fahrenheita, v drugo pa v stopinjah Celzija. Želimo, da sta oba vnosna polja sinhronizirana: ob vnosu temperature v eno vnosno polje naj se ustrezno spremeni tudi v drugem.

Napačen pristop bi bila uporaba dveh stanj: eno za temperaturo v Fahrenheitu, drugo pa v Celziju. Zakaj je napačno: ker ena temperatura izhaja iz druge, kar pomeni, da mora biti za shranjevanje podatkov uporabljeno le eno stanje.

Napišite implementacijo opisane naloge.

Neki programer je napisal kodo, ki prikazuje vsoto elementov polja:

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); // vsota elementov polja nums
	
	function handleChange(event) {
		setValue(event.target.value);
	}
	
	function handleBlur(event) {
		setNums([...nums, event.target.value]); // dodamo element v polje
		setSum(getSum([...nums, event.target.value])); // znova izračunamo vsoto
	}
	
	return <div>
		<p>{sum}</p>
		<input value={value} onChange={handleChange} onBlur={handleBlur} />
	</div>;
}

Kaj je narobe s to kodo? Popravite jo.

Neki programer je napisal kodo za urejanje elementov polja:

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]); // zapišemo besedilo urejanega elementa v ločeno stanje
	}
	
	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>;
}

Kaj je narobe s to kodo? Popravite jo.