Rendering new component on-click in a parent component

I have a button component called CreateTicket and a component I want to render on click called IndividualTicketInput. I have created a parent component where I currently have both of these. I need to have a function that renders a new ticket component on-click in the parent component underneath the first IndividualTicketInput and so forth. I know I have to push into the tickets array but I am still learning react and having trouble understanding the concepts. How would you best go about this and if you need clarity on my end please let me know.

button component

var CreateTicket = React.createClass({
  getInitialState: function() {
    return{};
  },
  render: function() {
    return(
      <button type="button" className="add-another-ticket">
        +Add Ticket
      </button>
    );
  }
})

Ticket Component **(this is the component I want to render on click)

var IndividualTicketInput = React.createClass({
  getInitialState: function() {
    return { ticket: {name: '', quantity: '', price: null} };
  },
  render: function() {
    return (
      <ul>
        <li>
          <label>Ticket Name</label>
          <input className="ticket-name" type="text" placeholder="E.g. General Admission" value={this.state.ticket.name} />
        </li>
        <li>
          <label>Quantity Available</label>
          <input className="quantity" type="number" placeholder="100" value={this.state.ticket.quantity} />
        </li>
          <li>
            <label>Price</label>
            <input className="price" type="number" placeholder="25.00" value={this.state.ticket.price} />
          </li>
        <li>
          <button type="button" className="delete-ticket" onClick={this.deleteTicket}><i className="fa fa-trash-o delete-ticket"></i></button>
        </li>
      </ul>
    );
  }
});

Tickets Component

var Tickets = React.createClass({
  getInitialState: function() {
    return {tickets: [] };
  },
  createNewTicket: function() {

    // where the push happens on click to create the new IndividualTicketInput component

    // this is what I am currently trying but it isn't working
    var tickets = this.state.tickets;
     this.state.tickets.push(
      <IndividualTicketInput />
    )
    this.forceUpdate();

  },
  render: function() {
    return (
      <div>
        <IndividualTicketInput />
        // new component will render here
        <div>{this.state.tickets}</div>
        <CreateTicket onClick={this.createNewTicket} />
      </div>
    );
  }
});