Ιδιότητες (Props) Στοιχείων στο React

Στο προηγούμενο μάθημα εμφανίσαμε πολλά αντικείμενα προϊόντων:

function App() {
	return <div>
		<Product />
		<Product />
		<Product />
	</div>;
}

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

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

Για να το κάνουμε αυτό, πρέπει να ακολουθήσουμε αρκετά βήματα.

Αρχικά, κατά την κλήση της ετικέτας του προϊόντος, θα γράφουμε σε αυτήν την ετικέτα δύο ιδιότητες: την ιδιότητα name με το όνομα του προϊόντος και την ιδιότητα cost με την τιμή, έτσι:

function App() {
	return <div>
		<Product name="product1" cost="100" />
		<Product name="product2" cost="200" />
		<Product name="product3" cost="300" />
	</div>;
}

Τα ονόματα και οι τιμές αυτών των ιδιοτήτων θα μεταβιβάζονται ως αντικείμενο στην πρώτη παράμετρο της συνάρτησης-κατασκευαστή του στοιχείου μας Product:

function Product(props) {
	console.log(props); // αντικείμενο με κλειδιά name και cost
	
	return <p>
		product
	</p>;
}

Το όνομα της παραμέτρου μπορεί να είναι οτιδήποτε, αλλά στο React είναι συνηθισμένο να ονομάζεται props. Στην πραγματικότητα, αυτό δεν είναι απλώς το όνομα μιας παραμέτρου, αλλά μια σημαντική έννοια του React.

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

Ας το κάνουμε:

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

Είναι πιο βολικό και πιο συνηθισμένο να μην χρησιμοποιούμε το αντικείμενο props αμέσως, αλλά να εκτελούμε αποσυσκευασία (destructuring) των props απευθείας στις παραμέτρους της συνάρτησης:

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

Δημιουργήστε ένα στοιχείο Employee, που να εμφανίζει τα δεδομένα ενός εργαζομένου στην οθόνη. Ας είναι αυτά τα δεδομένα το επώνυμό, το όνομα, το πατρώνυμο και ο μισθός. Διαμορφώστε αυτά τα δεδομένα στην επιθυμητή σας μορφοποίηση. Εμφανίστε στο στοιχείο App τρεις εργαζόμενους με διαφορετικά δεδομένα.