Как сделать клон компонента при нажатии на кнопку?

Question

[Vanya Huk]

Как сделать клон компонента при нажатии на кнопку как в
примере

Answer 1

[Максим]

Компоненты должны рисоваться в цикле ( map'ом или forEach'ом ). Данные должны лежать в стейте. При клике на "добавить" - появляется новая запись в state и компонент автоматически дорисовывается.

Псевдо код:

state = {
  modelSelectors: [{obj1}, {obj2}]
}

renderSelectors = () => {
  this.state.model.selectors.map(item => <Select ... />
}

addSelector = () => {
  this.setState({ modelSelectors: +1 элемент в массиве })
}

Answer 2

[Анатолий Жаров]

Реакт не про работу с DOM, реакт про отрисовку интерфейса на основе состояния. Стоит подумать какая структура стейта наиболее соответствует задаче (массив объектов) и на ее основе рисовать форму. В 99 случаях из 100 не нужно никакие компоненты никуда клонировать