Movie Seat Selection
Build a minimal cinema seat-booking UI. Render a seat grid where each seat is available, selected, or already booked. Clicking an available seat selects it (click again to deselect); a live footer shows how many seats are picked and the total price. Pressing Book confirms the selection — those seats become booked and the selection resets.
Requirements
- Render a grid of seats with row labels (A–F) and a screen indicator
- Each seat is one of: available, selected, or booked (unavailable)
- Clicking an available seat toggles it selected ↔ available
- Booked seats are not clickable
- Show a live count and total price for the current selection
- Book button (disabled when nothing is selected) confirms: selected → booked, clear selection
Key Patterns
useState (set of selected ids)derived total & countpre-seeded booked seatsconditional stylingdisabled interaction
Important
Interview Tip
Keep only the selected seat ids in state (a Set or array) and DERIVE the count and total price inline during render — never store them as separate state, or they can drift out of sync. Booked seats come from the initial data and are simply non-interactive; on Book you merge the selection into the booked set and clear the selection.
Screen this way
A
B
C
D
E
F
availableselectedbooked
0 seats · ₹0