Αλλαγή της κατάστασης του γονέα στο θυγατρικό στοιχείο στο React

Στο προηγούμενο μάθημα, η κατάσταση με τα δεδομένα αποθηκευόταν στο γονικό στοιχείο, και τα θυγατρικά στοιχεία έπαιρναν αυτά τα δεδομένα σε μορφή props.

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

const initProds = [
	{id: id(), name: 'product1', cost: 100, inCart: false},
	{id: id(), name: 'product2', cost: 200, inCart: false},
	{id: id(), name: 'product3', cost: 300, inCart: false},
];

Στο στοιχείο Products στην ετικέτα με το προϊόν θα προσθέσουμε ακόμα ένα χαρακτηριστικό inCart:

function Products() {
	const [prods, setProds] = useState(initProds);
	
	const items = prods.map(prod => {
		return <Product
			key   ={prod.id}
			name  ={prod.name}
			cost  ={prod.cost}
			inCart={prod.inCart}
		/>;
	});
	
	return <div>
		{items}
	</div>;
}

Ας κάνουμε στο θυγατρικό στοιχείο Product μια έξοδο πληροφοριών για το καλάθι και ένα κουμπί για προσθήκη στο καλάθι:

function Product({ id, name, cost, inCart }) {
	return <div>
		name: <span>{name}</span>,
		cost: <span>{cost}</span>,
		<span>{inCart ? 'in cart' : 'not in cart'}</span>
		<button>to cart</button>
	</div>;
}

Υλοποιούμε την προσθήκη

Σύμφωνα με τους κανόνες του React, ένα στοιχείο δεν πρέπει να αλλάζει τα props του. Αυτό σημαίνει ότι το θυγατρικό στοιχείο δεν μπορεί να βάλει τον εαυτό του στο καλάθι, αλλάζοντας το prop inCart. Αυτό δεν είναι σωστό.

Το σωστό θα ήταν να ζητήσουμε από το γονικό στοιχείο να αλλάξει την κατάστασή του prods, βάζοντας ένα συγκεκριμένο προϊόν στο καλάθι.

Ας δούμε πώς γίνεται αυτό.

Στο γονικό στοιχείο ας φτιάξουμε μια συνάρτηση addToCart, που παίρνει ως παράμετρο το id του προϊόντος και για αυτό το προϊόν αλλάζει την ιδιότητα inCart σε true:

function addToCart(id) {
	setProds(prods.map(prod => {
		if (prod.id === id) {
			prod.inCart = true;
		}
		
		return prod;
	}));
}

Στην ετικέτα με το προϊόν θα προσθέσουμε ένα χαρακτηριστικό, στο οποίο θα περάσουμε τη συνάρτηση που δημιουργήσαμε, καθώς και ένα χαρακτηριστικό, στο οποίο θα περάσουμε το id του προϊόντος:

const items = prods.map(prod => {
	return <Product
		key      ={prod.id}
		id       ={prod.id}
		name     ={prod.name}
		cost     ={prod.cost}
		inCart   ={prod.inCart}
		addToCart={addToCart}
	/>;
});

Όπως βλέπετε, στα props των στοιχείων μπορούμε να περνάμε όχι μόνο δεδομένα, αλλά και συναρτήσεις.

Ο τελικός κώδικας της κλάσης Products θα είναι ο ακόλουθος:

function Products() {
	const [prods, setProds] = useState(initProds);
	
	function addToCart(id) {
		setProds(prods.map(prod => {
			if (prod.id === id) {
				prod.inCart = true;
			}
			
			return prod;
		}));
	}
	
	const items = prods.map(prod => {
		return <Product
			key      ={prod.id}
			id       ={prod.id}
			name     ={prod.name}
			cost     ={prod.cost}
			inCart   ={prod.inCart}
			addToCart={addToCart}
		/>;
	});
	
	return <div>
		{items}
	</div>;
}

Τώρα στη θυγατρική κλάση θα έχουμε διαθέσιμη τη συνάρτηση addToCart. Ας καλέσουμε αυτή τη συνάρτηση με κλικ στο κουμπί, περνώντας της ως παράμετρο το id του προϊόντος:

function Product({ id, name, cost, inCart, addToCart }) {
	return <div>
		name: <span>{name}</span>,
		cost: <span>{cost}</span>,
		<span>{inCart ? 'in cart' : 'not in cart'}</span>
		<button onClick={() => addToCart(id)}>to cart</button>
	</div>;
}

Θα γίνει ότι, με κλικ στο κουμπί στο παιδί θα κληθεί η συνάρτηση του γονέα, που και θα αλλάξει την κατάσταση του γονέα. Η αλλαγή της κατάστασης του γονέα θα προκαλέσει επαναπροσδιορισμό και θα ξανασχεδιάσει το προϊόν μας, περνώντας του το αλλαγμένο prop.

Πάρτε το στοιχείο User από το προηγούμενο μάθημα. Κάντε έτσι ώστε σε αυτό να εμφανιστεί ένα κουμπί για απαγόρευση του χρήστη.