Katkat
Back

Implement React check-in/out month dropdowns

Akuna CapitalSoftware Engineer · HR Screen
MediumSoftware EngineerHR ScreenSoftware Engineering Fundamentals

Last updated

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.

You are given a React codebase for a hotel reservation page. Enhance the UI by adding two dropdown menus: one for Check-in month and one for Check-out month. Requirements: (

  1. Render the two month dropdowns integrated with the existing form; months should be selectable (e.g., January–December). (
  2. Enforce that the selected Check-out month is not earlier than the Check-in month; disable invalid options accordingly. (
  3. Disable months earlier than the current month for both dropdowns. (
  4. Keep the components controlled and synchronize selections with the provided state management (e.g., props/callbacks or context) so the booking form receives updates. (
  5. Validate on change and on submit; block submission and show inline errors if the constraint is violated. (
  6. Ensure keyboard accessibility and proper ARIA labels. (
  7. Add unit tests covering state updates, disabled options, and validation behavior.