Forms and inputs React Questions

Render a controlled select dropdown from an array of strings or objects using map(). Know how to track the selected value and handle the placeholder option.

Track a select value in state and display it anywhere on the page. This is the controlled component pattern applied to dropdowns and is the foundation for summary panels and confirmation UIs.

Render a controlled radio group from an array using map(). Understand the name attribute for grouping, checked from state, and accessibility with fieldset and legend.

Controlled components let React own the input value through state. Uncontrolled components let the DOM own the value and read it via refs. Know when each is appropriate.

useReducer separates state transition logic from the component using a reducer function and typed actions. Understand when it is the right tool over useState.

Build the same counter component with both useState and useReducer. Understand the tradeoffs and know when to reach for each.

Build chained dropdowns where the second options list derives from the first selection. Extend the pattern to API-driven options and three-level chains.

React forms work through controlled inputs where state is the single source of truth. Understand the cycle, real-time validation, input formatting, and the multi-field pattern with a shared handler.

Filter a list in real time by combining a controlled input with array filter(). Add debouncing for API search and useMemo for expensive client-side filtering.

Implement a character counter for a textarea using a controlled input. Understand why the counter should be derived state, not stored state, and when useRef is the right tool instead.