TextInput with controlled state in React Native - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a controlled TextInput in React Native?

A controlled TextInput is one where the input value is managed by React state. The displayed text is set by a state variable, and changes update that state.

beginner

Why use controlled TextInput instead of uncontrolled?

Controlled TextInput lets you validate, format, or respond to user input immediately by keeping the input value in React state.

beginner

Which React hook is commonly used to manage TextInput state?

The useState hook is used to create a state variable and update function to control the TextInput value.

beginner

How do you update the state when the user types in a controlled TextInput?

You pass a function to the TextInput's onChangeText prop that receives the new text and calls the state update function.

intermediate

What happens if you forget to update the state in a controlled TextInput?

The TextInput will not update its displayed text because the value prop stays the same, making the input appear frozen.

In React Native, which prop sets the displayed text in a controlled TextInput?

A text

B defaultValue

C value

D input

The value prop controls the displayed text in a controlled TextInput.

Which hook is used to create a state variable for TextInput value?

A useState

B useEffect

C useContext

D useRef

useState creates state variables and update functions.

What prop do you use to detect text changes in a TextInput?

A onTextChange

B onChangeText

C onInput

D onChange

onChangeText is the correct prop for text change events in React Native TextInput.

What happens if you set a fixed value prop but do not update state on text change?

A TextInput becomes read-only

B TextInput clears text

C TextInput crashes

D TextInput updates normally

Without updating state, the TextInput appears read-only because value never changes.

Why might you prefer controlled TextInput over uncontrolled?

A To avoid using state

B To improve performance

C To disable keyboard

D To handle input validation easily

Controlled inputs let you validate or format input as the user types.

Explain how to create a controlled TextInput in React Native.

Think about how React state controls the input text.

Describe what happens if the onChangeText handler does not update the state in a controlled TextInput.

Consider the connection between state and displayed text.