Как добавлять неограниченное количество элементов в React?

Question

[way_t]

Необходимо по клику на кнопку добавлять какой-то html. Допустим, нажали -- появился новый инпут. Ещё нажали -- ещё появился и т.д.

Как это можно реализовать на чистом React + ES6?

Comments

[Роман Александрович]

https://codepen.io/antonietta/pen/KzxxWN?editors=1010
можете посмотреть логику и переработать под себя

Answer 1

[Алексей Уколов]

Изменять state компонента по клику на кнопку.

#какойвопростакойиответ

Answer 2

[sinneren]

Создать какой-нибудь компонент инпута const input =
Создать список инпутов let list_inputs = [];
При клике мы добавляем input в list_inputs: list_inputs.push(input).
Абстрактно так.

Answer 3

[s-jet]

Что-то тип того

constructor(props) {
        super(props);
        this.state = {
          data: []
        };
};
renderInput () {
   return this.state.data.map(item => {
       return <div>
           <input type="text" value={item}/>
       </div>
   })
}

addInput () {
   let data = this.state.data;
   data.push('Новый инпут');
   this.setState({ data: data });
}

render() {
   return (<div>
       <button onClick={this.addInput.bind(this)}>Добавить</button>
       {this.renderInput()}
    </div>
    )
}