Implement React check-in/out month dropdowns
Overview
This question evaluates front-end React skills including controlled components, state synchronization, interdependent input validation, keyboard accessibility/ARIA, and unit testing for UI behavior, and it sits in the Front-end/UI development domain (Other/Miscellaneous) with an emphasis on practical implementation rather than purely conceptual reasoning. It is commonly asked because interviewers use it to verify an engineer's ability to enforce input constraints, integrate dropdowns with existing form state and submission flows, maintain accessibility with native controls, and provide test coverage for validation and disabled-option behavior.
React UI Enhancement: Check-in/Check-out Month Dropdowns
Context
You are working on a hotel reservation form in a React codebase. The form needs two new, controlled dropdowns for selecting months: one for Check-in and one for Check-out. The selections must respect constraints based on the current month and each other. Assume the form already has state management and an onSubmit handler; you will integrate with it via controlled props/callbacks or context.
Requirements
- Render two month dropdowns (January–December) integrated with the existing form.
- Enforce that the selected Check-out month is not earlier than the Check-in month; disable invalid options accordingly.
- Disable months earlier than the current month for both dropdowns.
- Keep components controlled and synchronize selections with the provided state management (props/callbacks or context) so the booking form receives updates.
- Validate on change and on submit; block submission and show inline errors if constraints are violated.
- Ensure keyboard accessibility and proper ARIA labels.
- Add unit tests covering state updates, disabled options, and validation behavior.
Notes/Assumptions:
- Months are for the current year only. Without year selection, the constraint is month-based only (e.g., September ≥ August). If you later add years, update the comparison accordingly.
- Use native HTML select elements for built-in keyboard accessibility.
Solution
Login required