Mis kasutatakse andmejärjeste kuvamiseks JSX-is

Andmete loendi kuvamiseks JSX-is kasutatakse JavaScripti massiivide .map() meetodit.

// Näide andmemassiivist
const items = ['Punkt 1', 'Punkt 2', 'Punkt 3'];

// Loendi kuvamine `.map()` abil
const List = () => (
  <ul>
    {items.map((item, index) => (
      // Iga loendi elemendi jaoks on oluline kasutada unikaalset võtit
      <li key={index}>{item}</li>
    ))}
  </ul>
);

map() läbib iga massiivi elemendi ja tagastab uue React-elementide massiivi, mis seejärel renderdatakse DOM-is. Oluline on iga loendi elemendi jaoks kasutada unikaalset key-omadust. See aitab Reactil tõhusalt kasutajaliidest uuendada, kui nimekiri muutub. key-ks võib kasutada unikaalset andmete identifikaatorit või, kui seda pole, elemendi indeksit massiivis.