Controlled Components & State Management

A. Controlled Components are form elements whose values are controlled by React state instead of the DOM itself. Every input value is stored in the state and updated through React, ensuring full control over user input.

Here, each OTP input field is controlled using the otp state array. Every digit entered by the user is stored in a state, and each input value is directly linked to it.

This allows validation, auto-focus movement, and paste handling to work smoothly. After the OTP is generated and displayed using a browser alert, the user enters it manually, and React continuously tracks each input to verify correctness.

B. State Management is the process of storing and updating dynamic data inside a component so that the UI reacts to changes automatically. It helps maintain consistency between user actions and what is displayed on the screen.

This project manages multiple states, such as OTP digits, loading status, timer, generated OTP, and verification status.

When the OTP is generated, it is stored in a state and shown via an alert pop-up, while the user input updates another state array. Based on state changes, the UI updates instantly, showing loading during verification, displaying success/error messages, and enabling resend OTP after the timer ends.