Как правильно динамически создавать элементы в react.js?

@akeem 

В React.js для динамического создания элементов рекомендуется использовать метод map() для обхода массива данных и создания элементов на основе каждого элемента массива.

Пример:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

import React from 'react';

class DynamicElements extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: ['Item 1', 'Item 2', 'Item 3'] // массив данных для элементов
    };
  }

  render() {
    const { items } = this.state;

    return (
      
        {items.map((item, index) => (
          {item} // создаем элемент  для каждого элемента массива, используя map()
        ))}
      
    );
  }
}

export default DynamicElements;

В данном примере в конструкторе класса мы определяем начальное состояние компонента, содержащее массив с данными для элементов. Затем в методе render() мы используем метод map() для создания элемента для каждого элемента массива. Ключ (пропс "key") необходим для определения уникальности элементов и повышения производительности React при обновлении списка элементов.

Вышеприведенный код создаст следующую разметку:

1
2
3
4
5

  Item 1
  Item 2
  Item 3

Вы можете изменять массив данных в состоянии компонента, и React автоматически перерисует элементы на основе обновленных данных.