Μοναδικά Κλειδιά σε Πίνακα Ετικετών στο React

Στο προηγούμενο παράδειγμα, σχηματίζαμε τις παραγράφους μας σε βρόχο, έτσι:

const res = arr.map(function(item) {
	return <p>{item}</p>;
});

Αυτό θα λειτουργήσει, ωστόσο, αν κοιτάξουμε την κονσόλα - θα δούμε ένα σφάλμα: Warning: Each child in an array or iterator should have a unique "key" prop. Σε αυτήν την περίπτωση το React απαιτεί να δώσουμε σε κάθε ετικέτα από τον βρόχο ένα μοναδικό αριθμό, ώστε το React να μπορεί να δουλέψει πιο εύκολα με αυτές τις ετικέτες στο μέλλον.

Αυτός ο αριθμός προστίθεται χρησιμοποιώντας το χαρακτηριστικό key. Σε αυτήν την περίπτωση ως αριθμό μπορούμε να πάρουμε τον αριθμό του στοιχείου στον πίνακα. Στην περίπτωσή μας αυτός ο αριθμός αποθηκεύεται στη μεταβλητή index και επομένως η διορθωμένη γραμμή θα μοιάζει έτσι:

const res = arr.map(function(item, index) {
	return <p key={index}>{item}</p>;
});

Ας τρέξουμε - το σφάλμα από την κονσόλα θα εξαφανιστεί:

function App() {
	const arr = [1, 2, 3, 4, 5];
	
	const res = arr.map(function(item, index) {
		return <p key={index}>{item}</p>;
	});
	
	return <div>
		{res}
	</div>;
}

Για άλλη μια φορά: αυτό το χαρακτηριστικό key έχει υπηρετική σημασία για το React, θα κατανοήσετε αυτό το σημείο πιο βαθιά στα επόμενα μαθήματα. Προς το παρόν απλά γνωρίστε: αν δείτε ένα τέτοιο σφάλμα - προσθέστε το χαρακτηριστικό key με μια μοναδική για κάθε ετικέτα τιμή και το πρόβλημα θα εξαφανιστεί.

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

Τροποποιήστε τη λύση σας από το προηγούμενο πρόβλημα σύμφωνα με τα παραπάνω.