Ενημέρωση περιεχομένου στο React

Σε αυτό το μάθημα θα εξετάσουμε την ενημέρωση των components κατά την αλλαγή της τιμής του περιεχομένου. Ας υποθέσουμε ότι θέλετε το περιεχόμενο να αλλάζει.

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

Λοιπόν, ας πάρουμε το αρχείο μας App και μετά από το BigBox ας σχεδιάσουμε ένα κουμπί:

function App() {
	return (
		<MyContext.Provider value="small box :)">
			<BigBox />
			<button>click</button>
		</MyContext.Provider>
	);
}

Στη συνέχεια εισάγουμε το hook useState και δημιουργούμε ένα state name, η τιμή του οποίου θα αλλάζει με το πάτημα του κουμπιού. Ας του ορίσουμε ως αρχική τιμή αυτή που αμέσως μεταδίδαμε ως τιμή του περιεχομένου, δηλαδή 'small box :)':

function App() {
	const [name, setName] = useState('small box :)');
}

Αυτή τη φορά ως περιεχόμενο θα μεταδίδουμε όχι μια συμβολοσειρά, αλλά το state name:

<MyContext.Provider value={name}>
	<BigBox />
	<button>click</button>
</MyContext.Provider>

Ως τελευταίο βήμα θα καλέσουμε έναν χειριστή κλικ στο κουμπί και με τη βοήθεια της συνάρτησης setName θα ορίσουμε μια νέα τιμή για το state σε 'metal box :)'. Μετά από αυτό μπορείτε να πατήσετε στο κουμπί και να ελέγξετε το αποτέλεσμα:

<button onClick={() => {
	setName('metal box :)');
}}>click</button>

Χρησιμοποιήστε την εφαρμογή που δημιουργήσατε για την επίλυση των προβλημάτων στο προηγούμενο μάθημα. Δημιουργήστε ένα state age, τον οποίο θα μεταδίδετε αντί για αριθμό μέσω του περιεχομένου από το App, ορίστε του αρχική τιμή 50. Προσθέστε κάτω από το component Parent στο App ένα κουμπί, όπου με κάθε κλικ πάνω του η τιμή του state age θα μειώνεται κατά 2.