Need to create a card component as many times as I click a button in React

Question

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 cardComponent one time. What should I do? Is there anyone that I could create these.

This is the 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) => {
    // This is the element which creates the card. 
    element = <CardComponent data="Give a little detail about the thing's you like!"
    heading= "Create Your Own Card" image="./owl.jpg"/>
    this.setState({
        change: element
    });
  }

  render() {
    return (
      <div>
        <div className="form-div">
          <div>
            <p className="form-title">Create Your Own Card</p>
            <hr/>
          </div>
          <div>
          <label className="form-label">Main Heading </label>
          <input className="form-input" type="text"/>
          <br/><br/>
          <label className="form-label">Some Info</label>
          <input className="form-input1" type="text"/>
          <br/><br/>
          {/* Just focus on the button */}
          <button onClick={this.handel} className="form-btn">CREATE</button>
        </div>
        </div>
        <div>
          {this.state.change}
        </div>
      </div>
    );
  }
}

Answer 1

There are many different ways you can approach this. I would recommend binding an onClick handler to your create button which would push an object into an array, which then, in turn, you could use to set the state. Then in your render, map over the state to return each card. Remeber you may need to use appropriate CSS for margins, inline-flex etc.

eg:

clickHander(){
    let arr = [];
    arr.push({
    <card/>
    })

    this.setState({change: arr})
}


render(){
    const card = this.state.change.map((card) => { return ( card )})
    return (
      <div>
       {card}
      </div>
    )
}

Hope this helps!

Answer 2

The problem on your code is that you override every time the same component. I changed your code for you to fix this:

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) => {

        // This is the element which creates the card. 
        let components = this.state.change;

        element = <CardComponent data="Give a little detail about the thing's you like!"
            heading="Create Your Own Card" image="./owl.jpg" />

        components.push(element);

        this.setState({
            change: components
        });
    }

    render() {
        return (
            <div>
                <div className="form-div">
                    <div>
                        <p className="form-title">Create Your Own Card</p>
                        <hr />
                    </div>
                    <div>
                        <label className="form-label">Main Heading </label>
                        <input className="form-input" type="text" />
                        <br /><br />
                        <label className="form-label">Some Info</label>
                        <input className="form-input1" type="text" />
                        <br /><br />

                        {/* Just focus on the button */}

                        <button onClick={this.handel} className="form-btn">CREATE</button>
                    </div>
                </div>
                <div>
                    {this.state.change.map(comp => (comp))}
                </div>
            </div>
        );
    }
}

Answer 3

Your current code only replaces the element. You want to use an array instead e.g. use it like this

this.setState({
        change: this.state.change.concat(element)
    });