Ce se folosește pentru afișarea unei liste de date în JSX?

Pentru afișarea unei liste de date în JSX, se utilizează metoda .map() a array-urilor JavaScript.

// Exemplu de array de date
const items = ['Punctul 1', 'Punctul 2', 'Punctul 3'];

// Afișarea listei cu ajutorul .map()
const List = () => (
  <ul>
    {items.map((item, index) => (
      // Este obligatoriu să folosim o cheie unică pentru fiecare element al listei
      <li key={index}>{item}</li>
    ))}
  </ul>
);

map() parcurge fiecare element al array-ului și returnează un nou array de elemente React, care sunt apoi randate în DOM. Este important să se utilizeze o proprietate key unică pentru fiecare element din listă. Acest lucru ajută React să actualizeze eficient interfața utilizatorului atunci când lista se modifică. Ca key, se poate folosi un identificator unic al datelor, sau, în lipsa acestuia, indexul elementului în array.