Reactjs : Add component on click of button

Question

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

Following is the fiddle for that

 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?

this is what you want? jsfiddle.net/mayankshukla5031/07v7qfzo i think you don't need to create a separate component for button and instead of pushing the new element in state maintain the count only how many child components you need to create. Then use loop to create equal no of child component. — Mayank Shukla
– Mayank Shukla, Commented Jun 15, 2017 at 12:39
I tried updating your code for a more updated react but I get error Each child in an array or iterator should have a unique "key" prop codesandbox.io/s/k93221y187 — LazerStackr
– LazerStackr, Commented Sep 1, 2018 at 18:54

andrewhl · Accepted Answer · 2017-06-15 12:52:14Z

3

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

answered Jun 15, 2017 at 12:52

andrewhl

1,0121 gold badge12 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

burak · Accepted Answer · 2017-06-16 06:45:45Z

0

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

edited Jun 16, 2017 at 6:45

answered Jun 15, 2017 at 12:51

burak

4,0741 gold badge17 silver badges21 bronze badges

2 Comments

nanobar Over a year ago

Rather than forcing an update it's better practice to use this.setState. This is because setState re-renders anyway and also batches the rendering.

burak Over a year ago

@DominicTobias I'm fully agree with you but I've just refactored the required part for the answer.

Collectives™ on Stack Overflow

Reactjs : Add component on click of button

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related