Controlled TextInput with value and onChangeText

WHAT THIS TESTS This checks understanding of the controlled component pattern, a React fundamental that newcomers often get subtly wrong with TextInput.

A GOOD ANSWER COVERS In a controlled TextInput, the displayed text is driven by React state rather than the native input holding its own value. You declare state, commonly const [text, setText] = useState(''). You bind the value prop to that state so the field always shows the current state value, establishing React as the single source of truth. You handle onChangeText, which is called on every change with the new string argument, and inside it you call setText with that string. This round trip, state to value and onChangeText back to state, keeps the UI and your data synchronized and lets you validate, transform, or limit input. Without onChangeText updating state, binding value to a constant or never-updated state makes the input appear frozen because every keystroke is immediately overridden by the unchanged state. An uncontrolled alternative omits value and reads the text via refs or onChangeText only, which is fine when you do not need to control the displayed value.

COMMON WRONG ANSWERS Providing value without onChangeText, freezing the field. Using onChange expecting a string when onChangeText is the convenience prop that passes the string directly. Mutating state directly instead of using the setter.

LIKELY FOLLOW-UPS What is the difference between controlled and uncontrolled inputs? How do you transform input, such as forcing uppercase? When would you debounce onChangeText?

ONE CONCRETE EXAMPLE A search box: const [query, setQuery] = useState(''); render TextInput with value query and onChangeText setQuery. Each keystroke updates query, re-renders, and the field reflects it. You can derive filtered results from query, or force uppercase by calling setQuery on the uppercased string inside onChangeText.