How to add unlimited elements in React?

Question

JavaScript

It is necessary to add some html by clicking on the button. Let's say they clicked - a new input appeared. Another click - another appeared, etc.
How can this be implemented in pure React + ES6? Thank you.

Answer 1

Change the state of a component on button click.
#what a simple answer

Answer 2

Create some input component const input =
Create a list of inputs let list_inputs = [];
On click, we add an input to list_inputs: list_inputs.push(input).
Abstractly so.

Answer 3

Something like that

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>
    )
}