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

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

jsxconst 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 και επομένως η διορθωμένη γραμμή θα μοιάζει έτσι:

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

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

jsxfunction 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 με μια μοναδική για κάθε ετικέτα τιμή και το πρόβλημα θα εξαφανιστεί.