Remontée d'état dans React

Souvent, plusieurs composants doivent refléter les mêmes données changeantes. Dans React, il est recommandé de remonter l'état partagé vers le plus proche ancêtre commun. Regardons un exemple.

Supposons que nous voulions créer un calculateur de température de l'eau. Il sera représenté par un champ de saisie (input) dans lequel l'utilisateur entrera la température, et un paragraphe dans lequel le verdict sera affiché : l'eau est liquide, l'eau est solide, l'eau est gazeuse.

Supposons que notre calculateur soit un composant conteneur Calculator :

function Calculator() {
	return <div>
		
	</div>;
}

Séparons le champ de saisie pour la température dans un composant TempInp, et le paragraphe avec le verdict - dans un composant Verdict :

function Calculator() {
	return <div>
		<Verdict />
		<TempInp />
	</div>;
}

Il est facile de comprendre que TempInp et Verdict doivent avoir un état (state) pour la température. De plus, il est logique que ce soit la même température : au fur et à mesure que les données sont saisies dans le champ, le verdict doit être affiché.

Dans un tel cas, il est recommandé d'utiliser une technique appelée remontée d'état : l'état, partagé par deux (ou plus) composants, est remonté vers le haut jusqu'à leur parent commun.

Dans notre cas, cela signifiera que l'état de température doit appartenir au composant Calculator, qui le transmettra à TempInp et Verdict via les props :

function Calculator() {
	const [temp, setTemp] = useState(0);
	
	return <div>
		<Verdict temp={temp} />
		<TempInp temp={temp} />
	</div>;
}

Le composant TempInp doit avoir un champ de saisie (input) pour modifier la température. Mais, puisque cette température est une prop de ce composant, il n'est pas possible de la modifier directement dans TempInp. La bonne méthode est de transmettre depuis le composant Calculator une fonction spéciale pour modifier la température :

function Calculator() {
	const [temp, setTemp] = useState(0);
	
	function changeTemp(event) {
		setTemp(event.target.value);
	}
	
	return <div>
		<Verdict temp={temp} />
		<TempInp temp={temp} changeTemp={changeTemp} />
	</div>;
}

On peut, d'ailleurs, ne pas créer de nouvelle fonction, mais transmettre directement la fonction setTemp au composant enfant :

function Calculator() {
	const [temp, setTemp] = useState(0);
	
	return <div>
		<Verdict temp={temp} />
		<TempInp temp={temp} setTemp={setTemp} />
	</div>;
}

Écrivez l'implémentation des composants TempInp et Verdict.

Trouvez 3 problèmes pour lesquels il est nécessaire d'utiliser la remontée d'état. Écrivez les solutions de ces problèmes.