Как отрисовать компоненты на основе массива?

Отрисовка компонентов на основе массива в React обычно выполняется с помощью метода map.

Сам процесс включает следующие шаги:

1. Использование метода map для итерации по элементам массива.
2. Для каждого элемента массива возвращается экземпляр желаемого компонента.
3. Каждому отрисовываемому компоненту передается уникальный пропс key для оптимизации работы React.

Пример с функциональным компонентом:

import React from 'react';

const ItemComponent = ({ data }) => (
  <div>
    <p>{data.text}</p>
  </div>
);

const ListComponent = ({ items }) => (
  <div>
    {items.map(item => (
      <ItemComponent key={item.id} data={item} /> // Обязателен уникальный key
    ))}
  </div>
);

В этом примере:

• items - массив данных.
• map итерирует по массиву.
• ItemComponent отрисовывается для каждого элемента.
• key={item.id} используется для идентификации каждого элемента в списке.

Важно помнить о необходимости уникального key для каждого элемента в списке. Это помогает React эффективно обновлять DOM при изменениях в массиве. В качестве key следует использовать уникальный идентификатор элемента (например, ID из базы данных), а не индекс в массиве, если порядок элементов может меняться.