React Time Picker Component

This challenge asks you to build a reusable time picker component in React using TypeScript. A time picker is a common UI element allowing users to easily select a specific time, and it's useful in applications like scheduling tools, appointment booking systems, and form inputs requiring time selection. Your component should provide a clean and intuitive interface for selecting hours and minutes.

Problem Description

You need to implement a React component called TimePicker that allows users to select a time (hours and minutes). The component should:

• Display: Show separate input fields or controls for hours and minutes. Consider using number inputs or dropdowns.
• Validation: Validate the entered hours and minutes to ensure they are within valid ranges (0-23 for hours, 0-59 for minutes). Display appropriate error messages if the input is invalid.
• State Management: Manage the selected hours and minutes in the component's state.
• Change Handling: Update the state whenever the user changes the hours or minutes.
• Output: Provide a way to access the selected time (e.g., as a string in HH:MM format) from the component. This could be through a prop or a callback function.
• Accessibility: Ensure the component is accessible by using appropriate HTML elements and ARIA attributes.

Expected Behavior:

1. The component should render with input fields (or dropdowns) for hours and minutes.
2. Entering invalid values (e.g., 25 for hours, 60 for minutes) should display an error message next to the respective input field.
3. Changing the hours or minutes should update the component's state and trigger a callback function (if provided) with the new time in HH:MM format.
4. The component should handle initial values passed as props.

Edge Cases to Consider:

• Empty input fields.
• Non-numeric input.
• Initial values for hours and minutes.
• User rapidly changing values, potentially triggering multiple updates.
• Component re-rendering and maintaining state.

Examples

Example 1:

Input:  <TimePicker onChange={(time) => console.log("Selected time:", time)} />
Output: A component with number inputs for hours and minutes, initially set to 0.
Explanation: The component renders with default values and logs the selected time to the console whenever it changes.

Example 2:

Input: <TimePicker initialHours={10} initialMinutes={30} onChange={(time) => console.log("Selected time:", time)} />
Output: A component with number inputs for hours and minutes, initially set to 10 and 30 respectively.
Explanation: The component renders with the provided initial values and logs the selected time to the console whenever it changes.

Example 3: (Edge Case)

Input: <TimePicker onChange={(time) => console.log("Selected time:", time)} />
User enters "abc" in the hours field.
Output: An error message appears next to the hours field indicating invalid input. The minutes field remains unchanged.
Explanation: The component validates the input and displays an error message for invalid characters.

Constraints

• Component Structure: The component should be a functional component using React Hooks.
• TypeScript: The code must be written in TypeScript.
• Dependencies: You are allowed to use standard React and TypeScript features. Avoid external UI libraries for the time picker itself (focus on the core logic).
• Performance: The component should re-render efficiently when the time changes. Avoid unnecessary re-renders.
• Input Fields: Use number input fields for hours and minutes.

Notes

• Consider using useState hook for managing the component's state.
• Think about how to handle input validation and error messages effectively.
• The onChange callback should be called with a string representing the selected time in "HH:MM" format (e.g., "10:30").
• You can choose to implement the component with separate input fields or dropdowns for hours and minutes. The key is to provide a functional and user-friendly time selection interface.
• Focus on creating a clean, well-structured, and maintainable component.