Един източник на истина в React

За всякакви променящи се данни в React приложение трябва да има един източник на истина. Под тези думи се има предвид, че ако имате две състояния и едното състояние може да бъде изчислено чрез другото - означава, че едно от състоянията е излишно и трябва да бъде премахнато.

Нека да го разгледаме с пример. Да приемем, че имате, например, два входни полета: в първото се въвежда температурата в градуси по Фаренхайт, а във второто - в градуси по Целзий. При това ние искаме, и двата инпута да са синхронизирани: при въвеждане на температура в единия инпут, тя по съответния начин трябва да се променя и във втория.

Неправилен подход би бил да се въведат две състояния: едно за температурата по Фаренхайт, а второто - по Целзий. Защо не е правилно: защото едната температура се изчислява от другата, което означава, че като място за съхранение на данни трябва да има едно състояние.

Напишете реализация на описаната задача.

Някой програмист написа код, който показва сумата на елементите на масив:

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); // сума на елементите на масива nums
	
	function handleChange(event) {
		setValue(event.target.value);
	}
	
	function handleBlur(event) {
		setNums([...nums, event.target.value]); // добавяме елемент в масива
		setSum(getSum([...nums, event.target.value])); // преизчисляваме сумата
	}
	
	return <div>
		<p>{sum}</p>
		<input value={value} onChange={handleChange} onBlur={handleBlur} />
	</div>;
}

Какво не е наред с този код? Поправете го.

Някой програмист написа код за редактиране на елементи на масив:

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]); // записваме текста на редактирания елемент в отделно състояние
	}
	
	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>;
}

Какво не е наред с този код? Поправете го.