CODEWITHSUNDEEP
reactjs
Priya
Priya

Reputation: 1481

Reactjs : Add component on click of button

I am trying to add a component on click of button.

Following is the fiddle for that

https://jsfiddle.net/rzv6Lrjh/92/ 

 render: function() {
   return (
     <div>
       <IndividualTicketInput />
       {this.state.tickets}
       <CreateTicket createTicket={this.onClick} />
     </div>
   );
  }
});

Here I am using individual component IndividualTicketInput , is it possible to do it inside single component Tickets component?

Upvotes: 3

Views: 4352

Answers (2)

burak
burak

Reputation: 4064

Yes, you can.

You can implement a function, which is returning the html elements of ticket UI, inside of Tickets component. But, I think it's not the best practice. Because, you should divide each UI component item as React Component.

https://jsfiddle.net/rwnvt8vs/

ticket: function(ticket = {name: '', quantity: '', price: null}){
    return (
    <ul>
        <li>
          <label>Ticket Name</label>
          <input className="ticket-name" type="text" placeholder="E.g. General Admission" value={ticket.name} />
        </li>
        <li>
          <label>Quantity Available</label>
          <input className="quantity" type="number" placeholder="100" value={ticket.quantity} />
        </li>
          <li>
            <label>Price</label>
            <input className="price" type="number" placeholder="25.00" value={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>
  );
},

onClick: function() {
    var newTicket = this.ticket();
    var tickets = this.state.tickets.push(newTicket);
    this.setState({tickets: tickets});
 },

Upvotes: 0

andrewhl
andrewhl

Reputation: 1012

You could store an array of tickets in state and generate a new ticket object each time you click the CreateTicket button. Store the new tickets in state and iterate over them, rendering each one to the dom. The component will rerender each time setState is called, updating the dom with your new <Ticket> component.

 state = { tickets: [] }

 render: function() {
   return (
     <div>
       <IndividualTicketInput />
       {this.state.tickets}
       <CreateTicket createTicket={this.onClick} />
       {this.renderTickets()}
     </div>
   );
  }
});

renderTickets() {
   return this.state.tickets.map(ticket => {
      return <Ticket key={ticket.id} ticket={ticket} />;
   });
}

onClick = () => {
   let newTicket = { ... };
   let tickets = this.state.tickets.unshift(newTicket);
   this.setState({tickets});
}

Upvotes: 3

Related Questions