Τι χρησιμοποιείται για την εμφάνιση μιας λίστας δεδομένων σε JSX;

Για την εμφάνιση μιας λίστας δεδομένων σε JSX, χρησιμοποιείται η μέθοδος .map() των JavaScript arrays.

// Παράδειγμα πίνακα δεδομένων
const items = ['Σημείο 1', 'Σημείο 2', 'Σημείο 3'];

// Εμφάνιση λίστας με .map()
const List = () => (
  <ul>
    {items.map((item, index) => (
      // Είναι υποχρεωτικό να χρησιμοποιούμε ένα μοναδικό key για κάθε στοιχείο της λίστας
      <li key={index}>{item}</li>
    ))}
  </ul>
);

Το map() διατρέχει κάθε στοιχείο του πίνακα και επιστρέφει έναν νέο πίνακα React στοιχείων, τα οποία στη συνέχεια αποδίδονται στο DOM. Είναι σημαντικό να χρησιμοποιείται μια μοναδική ιδιότητα key για κάθε στοιχείο στη λίστα. Αυτό βοηθά το React να ενημερώνει αποτελεσματικά το περιβάλλον χρήστη όταν αλλάζει η λίστα. Ως key, μπορεί να χρησιμοποιηθεί ένας μοναδικός αναγνωριστικός κωδικός των δεδομένων ή, αν δεν υπάρχει, ο δείκτης του στοιχείου στον πίνακα.