Una única fuente de verdad en React

Para cualquier dato modificable en una aplicación React debe haber una única fuente de verdad. Con esto queremos decir que si tienes dos estados y un estado puede ser calculado a través del otro - significa que uno de los estados es redundante y debe ser eliminado.

Discutamos esto con un ejemplo. Supongamos que tienes, por ejemplo, dos inputs: en el primero se introduce la temperatura en grados Fahrenheit, y en el segundo - en grados Celsius. Al mismo tiempo, queremos que ambos inputs estén sincronizados: al introducir la temperatura en un input, ésta debe cambiar correspondientemente en el segundo.

El enfoque incorrecto sería crear dos estados: uno para la temperatura en Fahrenheit, y el segundo - en Celsius. Por qué es incorrecto: porque una temperatura se calcula a partir de la otra, y por lo tanto, como almacenamiento de datos debe haber un único estado.

Escribe la implementación de la tarea descrita.

Un cierto programador escribió el código que muestra la suma de los elementos de un 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); // suma de los elementos del array nums
	
	function handleChange(event) {
		setValue(event.target.value);
	}
	
	function handleBlur(event) {
		setNums([...nums, event.target.value]); // añadimos un elemento al array
		setSum(getSum([...nums, event.target.value])); // calculamos la suma de nuevo
	}
	
	return <div>
		<p>{sum}</p>
		<input value={value} onChange={handleChange} onBlur={handleBlur} />
	</div>;
}

¿Qué está mal en este código? Corrígelo.

Un cierto programador escribió el código para editar elementos de un 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]); // escribimos el texto del elemento editado en un estado separado
	}
	
	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>;
}

¿Qué está mal en este código? Corrígelo.