Μεταβίβαση States σε Παιδικά Components στο React

Ας υποθέσουμε ότι έχουμε έναν πίνακα με προϊόντα:

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

Ας υποθέσουμε ότι αυτός ο πίνακας βρίσκεται στο component Products. Ας γράψουμε αυτά τα προϊόντα στην κατάσταση του component:

function Products() {
	const [prods, setProds] = useState(initProds);
}

Τώρα ας διατρέξουμε τα προϊόντα με βρόχο και ας τα εμφανίσουμε σε κάποια markup:

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

Όπως βλέπετε, το περιεχόμενο του βρόχου map είναι αρκετά πολύπλοκο, ειδικά αν το markup του προϊόντος αναπτυχθεί στο μέλλον. Αυτή η πολυπλοκότητα δυσκολεύει την ανάγνωση, την κατανόηση και τη συντήρηση του κώδικα.

Θα είναι καλύτερα να εξαγάγουμε τον κώδικα που είναι υπεύθυνος για την εμφάνιση του προϊόντος σε ξεχωριστό component. Ας το ονομάσουμε Product. Εδώ είναι ο κώδικας του component μας:

function Product({ name, cost }) {
	return <div>
		name: <span>{name}</span>,
		cost: <span>{cost}</span>
	</div>;
}

Ας τώρα μέσα στο component Products στον βρόχο map να χρησιμοποιήσουμε παιδικά components Product:

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

Όπως βλέπετε, τώρα ο κώδικας του βρόχου απλοποιήθηκε και έγινε πιο κατανοητός. Εκτός από αυτό, τώρα για την εμφάνιση του προϊόντος είναι υπεύθυνο ξεχωριστό component, στο οποίο μπορούμε να φτιάξουμε, και αργότερα να επεξεργαστούμε το markup των προϊόντων.

Τεχνικά, καταλήγουμε ότι το γονικό component έχει state με δεδομένα, ενώ τα παιδικά components λαμβάνουν αυτά τα δεδομένα σε μορφή props και τα εμφανίζουν με τον τρόπο που θέλουμε.

Στο state του component Users δίνεται ο ακόλουθος πίνακας:

const initUsers = [
	{id: id(), name: 'user1', surname: 'surn1', age: 30},
	{id: id(), name: 'user2', surname: 'surn2', age: 31},
	{id: id(), name: 'user3', surname: 'surn3', age: 32},
];

Διατρέξτε αυτόν τον πίνακα με βρόχο και εμφανίστε όλους τους χρήστες στην οθόνη. Δημιουργήστε για την εμφάνιση του χρήστη ξεχωριστό component User.