title: Delete a component from a list of component in ReactJS
body: <p>I have a reactjs code adding forms on button click. Now I want to delete an individual form on remove button click in  component. I have remove button in Test Component. The problem I am facing when I press any remove button all forms are deleted, I just want to delete a particular form.</p>
  
  <p>App.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import logo from './logo.svg';
  import './App.css';
  import Test from './Test.js';
  
  class App extends Component {
    state={
      numform: 0
    }
  
    Addform()
    {
      this.setState({
        numform: this.state.numform + 1
      }); 
    }
  
    render() {
      const form = [];
      for(var i=0;i&lt;this.state.numform;i+=1)
      {
        form.push(&lt;Test key={i}/&gt;);
      }
      return(
          &lt;div className="App "&gt;
            &lt;div className="App-header App-intro"&gt;
              &lt;button onClick={()=&gt;this.Addform()}&gt;+&lt;/button&gt;
            &lt;/div&gt;
              {form}
          &lt;/div&gt;
      );
    }
  
  }
  
  export default App;
  </code></pre>
  
  <p>Test.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import logo from './logo.svg';
  
  class Test extends Component {
    Removeform()
    {
      this.props.delete_this(this.props.key); 
    }
    render() {
      return(
          &lt;form&gt;
  
            &lt;input type="text" name="i1"&gt;&lt;/input&gt; 
            &lt;input type="text" name="i2"&gt;&lt;/input&gt;
            &lt;input type="submit" value="submit"&gt;&lt;/input&gt;
            &lt;button value="Remove" onClick={()=&gt;this.Removeform()}&gt;Remove&lt;/button&gt;
          &lt;/form&gt;
      );
    }
  }
  
  export default Test;
  </code></pre>