Event Handling & Conditional Rendering

A. Event Handling in React refers to managing user interactions like clicks, typing, pasting, or key presses. It allows the application to respond dynamically when the user performs an action.

The OTP component relies heavily on event handling to ensure smooth interaction. When a user types into an input box, the onChange event updates the OTP state and automatically moves focus to the next field.

The onKeyDown event handles backspace navigation, while the onPaste allows filling all digits at once. Even the Send OTP button click event triggers OTP generation, in which a 4-digit code is created and displayed via a browser alert for simulation.t

B. Conditional Rendering means showing or hiding UI elements based on certain conditions or states. It helps create dynamic interfaces that change according to user actions or data changes.

In this project, different UI parts appear based on the OTP flow. The OTP input fields are shown only after the OTP is generated. The Send OTP button disappears once the OTP is sent, and the resend button appears after the 30-second timer starts.

Loading spinner and success/error messages also appear conditionally based on verification status, making the UI behave like a real authentication system, where the OTP is first generated and shown via an alert before verification begins.