☰

Components με λίστες

Όταν καταχωρούμε λίστες σε ένα component πρέπει να έχουμε υπόψη τα εξής:

Οι λίστες διαβάζονται κατά κανόνα από εξωτερικά αρχεία.
Χρησιμοποιούμε συνήθως τις συναρτήσεις map() και filter() για να "γεμίσουμε" μια λίστα.
Χρησιμοποιούμε πάντα την ειδική ιδιότητα key με μια μοναδική τιμή σε κάθε στοιχείο λίστας.
Οι τιμές στα keys δεν πρέπει να αλλάζουν και χρησιμοποιούνται από το React για ασφαλή ανίχνευση σε περίπτωση αλλαγών στη λίστα.

const people = [
	'Creola Katherine Johnson: mathematician',
	'Mario José Molina-Pasquel Henríquez: chemist',
	'Mohammad Abdus Salam: physicist',
	'Percy Lavon Julian: chemist',
	'Subrahmanyan Chandrasekhar: astrophysicist'
];

function List() {
	const listItems = people.map((person, index) =>
		<li key = {index}>{person}</li>
	);
	return <ul>{listItems}</ul>;
}

Στο παραπάνω παράδειγμα περάστηκε ως key το index, κάτι το οποίο δεν προτιμάμε ως μη αρκετά ασφαλές.

Προτιμούμε το αρχείο με τα στοιχεία λίστας να περιέχουν κάποιο id

Στο παρακάτω παράδειγμα η λίστα περιέχει id στα στοιχεία της το οποίο καταχωρείται ως key στη λίστα του React.

const people = [{
  id: 0, // Used in JSX as a key
  name: 'Creola Katherine Johnson',
  profession: 'mathematician',
  accomplishment: 'spaceflight calculations',
  imageId: 'MK3eW3A'
}, {
  id: 1, // Used in JSX as a key
  name: 'Mario José Molina-Pasquel Henríquez',
  profession: 'chemist',
  accomplishment: 'discovery of Arctic ozone hole',
  imageId: 'mynHUSa'
}, {
  id: 2, // Used in JSX as a key
  name: 'Mohammad Abdus Salam',
  profession: 'physicist',
  accomplishment: 'electromagnetism theory',
  imageId: 'bE7W1ji'
}, {
  id: 3, // Used in JSX as a key
  name: 'Percy Lavon Julian',
  profession: 'chemist',
  accomplishment: 'pioneering cortisone drugs, steroids and birth control pills',
  imageId: 'IOjWm71'
}, {
  id: 4, // Used in JSX as a key
  name: 'Subrahmanyan Chandrasekhar',
  profession: 'astrophysicist',
  accomplishment: 'white dwarf star mass calculations',
  imageId: 'lrWQx8l'
}];

function List() {
  const listItems = people.map(person =>
    <li key={person.id}>
      <img
        src={getImageUrl(person)}
        alt={person.name}
      />
      <p>
        <b>{person.name}</b>
          {' ' + person.profession + ' '}
          known for {person.accomplishment}
      </p>
    </li>
  );
  return <ul>{listItems}</ul>;
}