Deviopath › React

Cinema Seat Booking

Hard · Derived State

Build a seat picker for a small cinema with rows A-C and seats 1-5.

Render every seat as <button className="seat" data-seat="A1">A1</button> (row by row). Seats listed in TAKEN are disabled and also have the class taken. The price of a seat depends on its row (see PRICES).

- Clicking a free seat selects it (adds the class selected); clicking it again unselects it.

- At most 4 seats can be selected. Trying to select a 5th seat does nothing except showing <p className="warning">You can select up to 4 seats.</p>. The warning disappears when a seat is unselected.

- Show <p className="seats">Seats: A1, C2</p> with the selected seats in grid order (row, then number), or "Seats: none".

- Show <p className="total">Total: $25</p>.

- A "Book" button (disabled when nothing is selected) marks the selected seats as taken, clears the selection and shows <p className="message">Booked: A1, C2</p>.

Next: Inventory Manager