Kas naudojama duomenų sąrašo rodymui JSX?

Norėdami JSX parodyti duomenų sąrašą, naudojame JavaScript masyvų .map() metodą.

// Duomenų masyvo pavyzdys
const items = ['Punktas 1', 'Punktas 2', 'Punktas 3'];

// Sąrašo rodymas naudojant `.map()`
const List = () => (
  <ul>
    {items.map((item, index) => (
      // Kiekvienam sąrašo elementui būtina naudoti unikalų raktą
      <li key={index}>{item}</li>
    ))}
  </ul>
);

map() pereina per kiekvieną masyvo elementą ir grąžina naują React elementų masyvą, kuris vėliau yra atvaizduojamas DOM. Svarbu naudoti unikalų key atributą kiekvienam sąrašo elementui. Tai padeda React efektyviai atnaujinti vartotojo sąsają, kai sąrašas keičiasi. Kaip key, galima naudoti unikalų duomenų identifikatorių arba, jei jo nėra, elemento indeksą masyve.