Ridicarea stării în React

Deseori, mai multe componente trebuie să reflecte aceleași date care se modifică. În React se recomandă ridicarea stării comune până la strămoșul comun cel mai apropiat. Să ne uităm la un exemplu.

Să presupunem că vrem să facem un calculator pentru temperatura apei. Acesta va reprezenta un câmp de introducere, în care utilizatorul va introduce temperatura, și un paragraf, în care se va afișa verdictul: apa este lichidă, apa este solidă, apa este gazoasă.

Să presupunem că calculatorul nostru reprezintă un container-componentă Calculator:

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

Să separăm câmpul de introducere a temperaturii în componenta TempInp, iar paragraful cu verdictul - în componenta Verdict:

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

Este ușor de înțeles că atât TempInp, cât și Verdict trebuie să aibă starea cu temperatura. În același timp, este logic că aceasta ar trebui să fie aceeași temperatură: pe măsură ce datele sunt introduse în câmpul de introducere, verdictul trebuie să fie afișat.

În acest caz, se recomandă utilizarea unei tehnici numită ridicarea stării: starea, comună pentru două (sau mai multe) componente, este ridicată în sus până la părintele lor comun.

În cazul nostru, se va dovedi că starea cu temperatura trebuie să aparțină componentei Calculator, care o va transmite în TempInp și Verdict ca proprietăți:

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

În componenta TempInp trebuie să fie un câmp de introducere pentru modificarea temperaturii. Dar, deoarece această temperatură este o proprietate a acestei componente, atunci direct în TempInp nu o poate modifica. Corect ar fi să transmitem din componenta Calculator o funcție specială pentru modificarea temperaturii:

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>;
}

Se poate, de altfel, să nu introducem o funcție nouă, ci să transmitem în componenta copil funcția setTemp:

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

Scrieți implementarea componentelor TempInp și Verdict.

Gândiți-vă la 3 probleme, în care trebuie să utilizați ridicarea stării. Scrieți soluțiile acestor probleme.