title: How to add dynamic form on a button click in react?
body: <p>I am making a react app in which i need to add a form whenever button is clicked. Presently i am doing by increasing a counter and displaying the forms based on number in counter. But i need to submit all forms and get data on a single button click but i am having submit for each form and data of that particular form is gained.How to solve this??</p>
  
  <p>This is how i am displaying forms:</p>
  
  <pre><code>var HocAddForm = function(AbstractComponent,title){
  return class extends React.Component {
  constructor(props){
    super(props);
    this.state={
      anotherForm:1
    }
    this.newForm=this.newForm.bind(this);
  }
  newForm(){
    this.setState({
      anotherForm:this.state.anotherForm+1
    })
  }
  displayForm(){
     let forms = [];
     for(let i = 0; i &lt; this.state.anotherForm; i++){
       forms.push(
       &lt;div key={i}&gt;
           &lt;AbstractComponent/&gt;
       &lt;/div&gt;
      )
     }
     console.log(this.state.value);
     return forms || null;
  }
  
  render() {
    const anotherForm=this.state.anotherForm;
    const heading=title;
    return(
      &lt;div&gt;
        &lt;button id="add-button" onClick={this.newForm}&gt;AddForm&lt;/button&gt;
        &lt;h3 className="form-place"&gt;{heading}&lt;/h3&gt;
        {this.displayForm()}
      &lt;/div&gt;
    )
  }
  }
  }
  </code></pre>
  
  <p>My <code>AbstractComponent</code> is:</p>
  
  <pre><code>class Experiance extends Component {
      render() {
          return (
              &lt;Form onSubmit={this.props.onSubmit}&gt;
                  &lt;fieldset disabled={this.props.disabled}&gt;
                      &lt;Input
                          type="text"
                          name="companyName"
                          title="Company Name"
                          value=""
                      /&gt;
                      &lt;Input
                          type="number"
                          name="experiance"
                          title="No.of Years Worked"
                          value=""
                      /&gt;
                  &lt;/fieldset&gt;
                  &lt;button id="button-right"&gt;
                      {this.props.buttonName}
                  &lt;/button&gt;
              &lt;/Form&gt;
          );
      }
  }
  </code></pre>