Mi használatos az adatok listájának megjelenítéséhez JSX-ben?

Az JSX-ben adatlista megjelenítéséhez a JavaScript tömbök .map() metódusát használjuk.

// Adat tömb példája
const items = ['Pont 1', 'Pont 2', 'Pont 3'];

// Lista megjelenítése `.map()` segítségével
const List = () => (
  <ul>
    {items.map((item, index) => (
      // Minden listaelemhez egyedi kulcs használata kötelező
      <li key={index}>{item}</li>
    ))}
  </ul>
);

A map() végigmegy minden elemén a tömbnek, és egy új React elemekből álló tömböt ad vissza, amelyeket aztán a DOM-ba renderel. Fontos, hogy minden listaelemhez egyedi key tulajdonságot használjunk. Ez segít a Reactnak hatékonyan frissíteni a felhasználói felületet, amikor a lista változik. A key lehet egyedi azonosító az adatokhoz, vagy hiányában az elem indexe a tömbben.