dynamic forms in react

1class App extends React.Component {
2  constructor(props) {
3    super(props);
4    this.state = { values: [] };
5    this.handleSubmit = this.handleSubmit.bind(this);
6  }
7
8  createUI(){
9     return this.state.values.map((el, i) => 
10         <div key={i}>
11    	    <input type="text" value={el||''} onChange={this.handleChange.bind(this, i)} />
12    	    <input type='button' value='remove' onClick={this.removeClick.bind(this, i)}/>
13         </div>          
14     )
15  }
16
17  handleChange(i, event) {
18     let values = [...this.state.values];
19     values[i] = event.target.value;
20     this.setState({ values });
21  }
22  
23  addClick(){
24    this.setState(prevState => ({ values: [...prevState.values, '']}))
25  }
26  
27  removeClick(i){
28     let values = [...this.state.values];
29     values.splice(i,1);
30     this.setState({ values });
31  }
32
33  handleSubmit(event) {
34    alert('A name was submitted: ' + this.state.values.join(', '));
35    event.preventDefault();
36  }
37
38  render() {
39    return (
40      <form onSubmit={this.handleSubmit}>
41          {this.createUI()}        
42          <input type='button' value='add more' onClick={this.addClick.bind(this)}/>
43          <input type="submit" value="Submit" />
44      </form>
45    );
46  }
47}
48
49ReactDOM.render(<App />, document.getElementById('container'));