title: Need to create a card component as many times as I click a button in React
body: <p>So, I want to create a card component many times I want on a click of a button but the problem is that it just creates the <code>cardComponent</code> one time. What should I do? Is there anyone that I could create these.</p>
  
  <p><a href="https://i.stack.imgur.com/QMwPH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QMwPH.png" alt="This is the image"></a></p>
  
  <p>This is the code:</p>
  
  <pre><code>class GCARD extends Component {
    constructor(props) {
      super(props);
      // This state changes so the card is generated
      this.state = {
          change: '',
      }
      this.handel = this.handel.bind(this);
    }
  
    handel = (element) =&gt; {
      // This is the element which creates the card. 
      element = &lt;CardComponent data="Give a little detail about the thing's you like!"
      heading= "Create Your Own Card" image="./owl.jpg"/&gt;
      this.setState({
          change: element
      });
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;div className="form-div"&gt;
            &lt;div&gt;
              &lt;p className="form-title"&gt;Create Your Own Card&lt;/p&gt;
              &lt;hr/&gt;
            &lt;/div&gt;
            &lt;div&gt;
            &lt;label className="form-label"&gt;Main Heading &lt;/label&gt;
            &lt;input className="form-input" type="text"/&gt;
            &lt;br/&gt;&lt;br/&gt;
            &lt;label className="form-label"&gt;Some Info&lt;/label&gt;
            &lt;input className="form-input1" type="text"/&gt;
            &lt;br/&gt;&lt;br/&gt;
            {/* Just focus on the button */}
            &lt;button onClick={this.handel} className="form-btn"&gt;CREATE&lt;/button&gt;
          &lt;/div&gt;
          &lt;/div&gt;
          &lt;div&gt;
            {this.state.change}
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>