Single Source of Truth in React

Per qualsiasi dato modificabile in un'applicazione React dovrebbe esserci una fonte unica della verità. Con questo si intende che se hai due stati e uno stato può essere calcolato dall'altro, allora uno degli stati è ridondante e dovrebbe essere rimosso.

Discutiamolo con un esempio. Supponiamo che tu abbia, ad esempio, due input: nel primo viene inserita la temperatura in gradi Fahrenheit, e nel secondo - in gradi Celsius. Inoltre, vogliamo che entrambi gli input siano sincronizzati: quando si inserisce la temperatura in un input, essa dovrebbe cambiare di conseguenza nel secondo.

Un approccio errato sarebbe creare due stati: uno per la temperatura in Fahrenheit e il secondo - in Celsius. Perché è errato: perché una temperatura viene calcolata dall'altra, quindi come archivio dei dati dovrebbe esserci un unico stato.

Scrivi l'implementazione del task descritto.

Un programmatore ha scritto il codice che visualizza la somma degli elementi di 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); // somma degli elementi dell'array nums
	
	function handleChange(event) {
		setValue(event.target.value);
	}
	
	function handleBlur(event) {
		setNums([...nums, event.target.value]); // aggiungiamo un elemento all'array
		setSum(getSum([...nums, event.target.value])); // ricalcoliamo la somma
	}
	
	return <div>
		<p>{sum}</p>
		<input value={value} onChange={handleChange} onBlur={handleBlur} />
	</div>;
}

Cosa non va in questo codice? Correggilo.

Un programmatore ha scritto il codice per modificare gli elementi di 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]); // scriviamo il testo dell'elemento da modificare in uno stato separato
	}
	
	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>;
}

Cosa non va in questo codice? Correggilo.