CODEWITHSUNDEEP
reactjs
luke
luke

Reputation: 1578

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>
    );
  }
});

Upvotes: 3

Views: 6209

Answers (1)

luke
luke

Reputation: 1578

Got this working. Attached props to the child button component and then passed through the component using push.

button component

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

Tickets component:

var Tickets = React.createClass({
  getInitialState: function() {
    return {
      tickets: []
    }
  },
  componentDidMount: function() {
    console.log('this mounted')
  },
  onClick: function() {
    this.state.tickets.push(
      <IndividualTicketInput />
    )
    this.forceUpdate();
  },
  render: function() {
    return (
      <div>
        <IndividualTicketInput />
        {this.state.tickets}
        <CreateTicket createTicket={this.onClick} />
      </div>
    );
  }
});

The only problem I run into now is the key situation but I will figure it out. Thanks all that took a look at this.

Upvotes: 3

Related Questions