Wat wordt gebruikt om een gegevenslijst weer te geven in JSX?

Om een gegevenslijst in JSX weer te geven, wordt de .map()-methode van JavaScript-arrays gebruikt.

// Voorbeeld van een gegevensarray
const items = ['Item 1', 'Item 2', 'Item 3'];

// Lijst weergeven met behulp van .map()
const List = () => (
  <ul>
    {items.map((item, index) => (
      // Het is verplicht om een unieke key te gebruiken voor elk lijstitem
      <li key={index}>{item}</li>
    ))}
  </ul>
);

map() doorloopt elk element van de array en geeft een nieuwe array van React-elementen terug, die vervolgens in de DOM worden gerenderd. Het is belangrijk om een unieke key-eigenschap te gebruiken voor elk element in de lijst. Dit helpt React om de gebruikersinterface efficiënt bij te werken wanneer de lijst verandert. Als key kan een unieke identificatie van de gegevens worden gebruikt, of, bij ontbreken hiervan, de index van het element in de array.