Co jest używane do wyświetlania listy danych w JSX?

Aby wyświetlić listę danych w JSX, używa się metody .map() tablic JavaScript.

// Przykład tablicy danych
const items = ['Pozycja 1', 'Pozycja 2', 'Pozycja 3'];

// Wyświetlanie listy za pomocą .map()
const List = () => (
  <ul>
    {items.map((item, index) => (
      // Konieczne jest użycie unikalnego klucza dla każdego elementu listy
      <li key={index}>{item}</li>
    ))}
  </ul>
);

map() iteruje przez każdy element tablicy i zwraca nową tablicę elementów React, które następnie są renderowane w DOM. Ważne jest, aby dla każdego elementu listy używać unikalnej właściwości key. To pomaga Reactowi efektywnie aktualizować interfejs użytkownika podczas zmiany listy. Jako key można użyć unikalnego identyfikatora danych, a w przypadku braku — indeksu elementu w tablicy.