Αντίδραση Καταστάσεων στο React

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

Ας δούμε ένα παράδειγμα. Ας υποθέσουμε ότι έχουμε μια κατάσταση με το όνομα ενός προϊόντος:

const [name, setName] = useState('prod');

Ας εμφανίσουμε το όνομα του προϊόντος στο markup:

return <div>
	<span>{name}</span>
</div>;

Ας φτιάξουμε τώρα ένα κουμπί, upon clicking στο οποίο η κατάστασή μας θα αλλάζει:

return <div>
	<span>{name}</span>
	<button onClick={clickHandler}>btn</button>
</div>;

Στο χειριστή κλικ χρησιμοποιούμε τη συνάρτηση setName, για να ορίσουμε στο προϊόν ένα νέο όνομα:

function clickHandler() {
	setName('xxxx');
}

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

function App() {
	const [name, setName] = useState('prod');
	
	function clickHandler() {
		setName('xxxx');
	}
	
	return <div>
		<span>{name}</span>
		<button onClick={clickHandler}>btn</button>
	</div>;
}

Η χρήση ξεχωριστών συναρτήσεων-χειριστών δεν είναι υποχρεωτική. Μπορείτε να χρησιμοποιήσετε μια ανώνυμη συνάρτηση βέλους:

function App() {
	const [name, setName] = useState('prod');
	
	return <div>
		<span>{name}</span>
		<button onClick={() => setName('xxxx')}>btn</button>
	</div>;
}

Δίνονται καταστάσεις με το όνομα και το επίθετο του χρήστη. Εμφανίστε τα στο markup. Φτιάξτε κουμπιά για αλλαγή αυτών των καταστάσεων.