Which statement correctly describes controlled components in React forms?

Which statement correctly describes controlled components in React forms?

• A. It relies on the DOM to hold the value via a ref.
• B. It has its value driven by React state (value and onChange).
• C. It cannot be used with forms.
• D. It renders using server-side HTML.

Answer: (B)

Controlled components are inputs whose value is driven by React state. The value prop comes from the component’s state and an onChange handler updates that state as the user types, so the displayed value always reflects the current state. This setup creates a single source of truth in the React app, making it easy to validate, transform, or enforce rules before rendering. This is why the statement describing the value being driven by React state with onChange is the best choice. It contrasts with relying on the DOM via a ref, which is how uncontrolled components work. It also isn’t about server-side rendering or purely relying on HTML output—the defining idea is that React state controls the input’s value.

Controlled components are inputs whose value is driven by React state. The value prop comes from the component’s state and an onChange handler updates that state as the user types, so the displayed value always reflects the current state. This setup creates a single source of truth in the React app, making it easy to validate, transform, or enforce rules before rendering.

This is why the statement describing the value being driven by React state with onChange is the best choice. It contrasts with relying on the DOM via a ref, which is how uncontrolled components work. It also isn’t about server-side rendering or purely relying on HTML output—the defining idea is that React state controls the input’s value.