ReactJs - Добавляйте уникальный компонент каждый раз во время onClick

Question

Я нахожусь в процессе изучения React и Redux. В настоящее время я работаю над проектом, в котором мне нужно добавить компонент нажатием кнопки.

1. Новый компонент должен быть добавлен к предыдущему компоненту
2. Ранее добавленный компонент содержит добавленные данные, и его не следует обновлять при добавлении нового компонента.

Я попытался выполнить поиск, но все решения рекомендуют использовать Список и увеличивать счетчик при каждом клике.

Это моя диаграмма требований:

Обновление: Я добавил свой код, который я попробовал в приведенной ниже JS Fiddle.

При добавлении нового компонента данные, измененные в существующем компоненте, следует сохранить.

https://jsfiddle.net/np7u6L1w/

constructor(props) {
super(props)
this.state = { addComp: [] }
}
addComp() { // Onclick function for 'Add Component' Button
//this.setState({ addComp: !this.state.addComp })
this.setState({
    addComp: [...this.state.addComp, <Stencil />]
});
}

render() {
return (
  <div>
    <div class="contentLeft"><h2>Workflows:</h2>
    <Stencil />
    {this.state.addComp.map((data, index) => {
            { data }        
    })}
    </div>
    <div class="contentRight" >
      <button name="button" onClick={this.addComp.bind(this)} title="Append new component on to the end of the list">Add Component</button>
    </div>
    <div class="clear"></div>
  </div>
)
}

Answer 1

возможно, когда добавится новый дочерний элемент, вы хотите, чтобы анимация работала.

это лучший метод группа реакции-перехода

пример: https://reactcommunity.org/react-transition-group/transition-group

Answer 2

Код обновлен: Вы можете сделать что-то подобное

// New state
this.state = {
   appendedCompsCount: 0
}

// Outside render()
handleClick = () => {
  this.setState({
    appendedCompsCount: this.state.appendedCompsCount + 1
  }) 
}

getAppendedComponents = () => {
  let appendedComponents = [];
  for (let i = 0; i < this.state.appendedCompsCount; i++) {
     appendedComponents.push(
       <AppendedComponents key={i} />
     )
  }
  return appendedComponents;
}

// In render()
<button onClick={this.handleClick}>Click here</button>
{
   this.getAppendedComponents() 
}