რა გამოიყენება მონაცემთა სიის ჩვენებისთვის JSX-ში?

JSX-ში მონაცემთა სიის ჩვენებისთვის გამოიყენება JavaScript-ის მასივების .map() მეთოდი.

// მონაცემთა მასივის მაგალითი
const items = ['პუნქტი 1', 'პუნქტი 2', 'პუნქტი 3'];

// სიის ჩვენება `.map()`-ის გამოყენებით
const List = () => (
  <ul>
    {items.map((item, index) => (
      // აუცილებელია თითოეული სიის ელემენტისათვის უნიკალური გასაღების გამოყენება
      <li key={index}>{item}</li>
    ))}
  </ul>
);

map() გადის თითოეულ ელემენტზე და აბრუნებს ახალი React ელემენტების მასივს, რომლებიც შემდეგ რენდერდება DOM-ში. მნიშვნელოვანია, რომ თითოეულ სიის ელემენტს ჰქონდეს უნიკალური key თვისება. ეს ეხმარება React-ს ეფექტურად განაახლოს მომხმარებლის ინტერფეისი, როდესაც სია იცვლება. როგორც key, შეიძლება გამოყენებულ იქნას მონაცემების უნიკალური იდენტიფიკატორი ან, თუ არ არსებობს, ელემენტის ინდექსი მასივში.