title: How to implement a dynamic form with controlled components in ReactJS?
body: <p>As I am looking at the examples in the reference for <code>controlled form components</code> <a href="https://facebook.github.io/react/docs/forms.html#controlled-components" rel="noreferrer">in react.js official website</a>, I am wondering how is one supposed to implement a <code>form</code> in which you would be able to <code>remove</code> and <code>add</code> <code>input</code> elements dynamically in such a way that they are controlled components? Is this even possible?</p>
  
  <p>In the examples we can see:</p>
  
  <pre><code>class NameForm extends React.Component {
    constructor(props) {
      super(props);
      this.state = {value: ''};
  
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
    }
  
    handleChange(event) {
      this.setState({value: event.target.value});
    }
  
    handleSubmit(event) {
      alert('A name was submitted: ' + this.state.value);
      event.preventDefault();
    }
  
    render() {
      return (
        &lt;form onSubmit={this.handleSubmit}&gt;
          &lt;label&gt;
            Name:
            &lt;input type="text" value={this.state.value} onChange={this.handleChange} /&gt;
          &lt;/label&gt;
          &lt;input type="submit" value="Submit" /&gt;
        &lt;/form&gt;
      );
    }
  }
  </code></pre>
  
  <p>Due to the nature of my work, I often find myself having to implement such forms. Moreover, I don't <code>add</code> or <code>remove</code> <code>input</code> elements directly - I am managing custom components, but for the sake of simplicity here I am asking for basic form elements.</p>