Ανύψωση Κατάστασης στο React

Συχνά πολλά components πρέπει να αντικατοπτρίζουν τα ίδια μεταβαλλόμενα δεδομένα. Στο React συνιστάται η ανύψωση της κοινής κατάστασης στον πλησιέστερο κοινό πρόγονο. Ας δούμε ένα παράδειγμα.

Ας υποθέσουμε ότι θέλουμε να φτιάξουμε μια αριθμομηχανή θερμοκρασίας νερού. Θα αποτελείται από ένα πεδίο εισαγωγής, στο οποίο ο χρήστης θα εισάγει τη θερμοκρασία, και μια παράγραφο, στην οποία θα εμφανίζεται η κρίση: το νερό είναι υγρό, το νερό είναι στερεό, το νερό είναι αέριο.

Ας υποθέσουμε ότι η αριθμομηχανή μας αντιπροσωπεύει ένα container component Calculator:

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

Ας βγάλουμε το πεδίο εισαγωγής θερμοκρασίας σε ένα component TempInp, και την παράγραφο με την κρίση - στο component Verdict:

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

Είναι εύκολο να καταλάβουμε ότι και το TempInp, και το Verdict πρέπει να έχουν state με τη θερμοκρασία. Ταυτόχρονα, είναι λογικό ότι αυτή πρέπει να είναι η ίδια θερμοκρασία: καθώς εισάγονται δεδομένα στο πεδίο εισαγωγής, πρέπει να εμφανίζεται η κρίση.

Σε μια τέτοια περίπτωση, συνιστάται η χρήση μιας τεχνικής, που ονομάζεται ανύψωση κατάστασης: η κατάσταση, που είναι κοινή για δύο (ή περισσότερα) components, ανυψώνεται προς τα πάνω στον πλησιέστερο κοινό γονέα τους.

Στην περίπτωσή μας, θα προκύψει ότι το state με τη θερμοκρασία πρέπει να ανήκει στο component Calculator, το οποίο θα το μεταδίδει στο TempInp και Verdict ως props:

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

Στο component TempInp πρέπει να υπάρχει ένα πεδίο εισαγωγής για αλλαγή της θερμοκρασίας. Αλλά, δεδομένου ότι αυτή η θερμοκρασία είναι prop αυτού του component, τότε δεν μπορεί να αλλάξει απευθείας στο TempInp. Σωστό θα ήταν να μεταφερθεί από το component Calculator μια ειδική συνάρτηση για αλλαγή της θερμοκρασίας:

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

Μπορούμε, παρεμπιπτόντως, να μην εισάγουμε νέα συνάρτηση, αλλά να μεταφέρουμε στο θυγατρικό component τη συνάρτηση setTemp:

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

Γράψτε την υλοποίηση των components TempInp και Verdict.

Σκεφτείτε 3 προβλήματα, στα οποία χρειάζεται να χρησιμοποιήσετε ανύψωση κατάστασης. Γράψτε τις λύσεις αυτών των προβλημάτων.