title: Rendering new component on-click in a parent component
body: <p>I have a button component called <code>CreateTicket</code> and a component I want to render on click called <code>IndividualTicketInput</code>. 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 <code>IndividualTicketInput</code> 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.</p>
  
  <p>button component</p>
  
  <pre><code>var CreateTicket = React.createClass({
    getInitialState: function() {
      return{};
    },
    render: function() {
      return(
        &lt;button type="button" className="add-another-ticket"&gt;
          +Add Ticket
        &lt;/button&gt;
      );
    }
  })
  </code></pre>
  
  <p>Ticket Component **(this is the component I want to render on click)</p>
  
  <pre><code>var IndividualTicketInput = React.createClass({
    getInitialState: function() {
      return { ticket: {name: '', quantity: '', price: null} };
    },
    render: function() {
      return (
        &lt;ul&gt;
          &lt;li&gt;
            &lt;label&gt;Ticket Name&lt;/label&gt;
            &lt;input className="ticket-name" type="text" placeholder="E.g. General Admission" value={this.state.ticket.name} /&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;label&gt;Quantity Available&lt;/label&gt;
            &lt;input className="quantity" type="number" placeholder="100" value={this.state.ticket.quantity} /&gt;
          &lt;/li&gt;
            &lt;li&gt;
              &lt;label&gt;Price&lt;/label&gt;
              &lt;input className="price" type="number" placeholder="25.00" value={this.state.ticket.price} /&gt;
            &lt;/li&gt;
          &lt;li&gt;
            &lt;button type="button" className="delete-ticket" onClick={this.deleteTicket}&gt;&lt;i className="fa fa-trash-o delete-ticket"&gt;&lt;/i&gt;&lt;/button&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      );
    }
  });
  </code></pre>
  
  <p>Tickets Component</p>
  
  <pre><code>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(
        &lt;IndividualTicketInput /&gt;
      )
      this.forceUpdate();
  
    },
    render: function() {
      return (
        &lt;div&gt;
          &lt;IndividualTicketInput /&gt;
          // new component will render here
          &lt;div&gt;{this.state.tickets}&lt;/div&gt;
          &lt;CreateTicket onClick={this.createNewTicket} /&gt;
        &lt;/div&gt;
      );
    }
  });
  </code></pre>