Μοναδικά κλειδιά μέσω id στο React

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

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

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

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

jsxconst prods = [
  {id: 1, name: 'product1', cost: 100},
  {id: 2, name: 'product2', cost: 200},
  {id: 3, name: 'product3', cost: 300},
];

Τώρα ως κλειδί χρησιμοποιούμε αυτό το id:

jsxfunction App() {
  const res = prods.map(function(item) {
    return <p key={item.id}>
      <span>{item.name}</span>:
      <span>{item.cost}</span>
    </p>;
  });
  
  return <div>
    {res}
  </div>;
}