Controlled input

Learn controlled input and state.

Controlled input

In React Native a controlled input is a TextInput whose value prop comes from a state and whose changes update that same state via onChangeText. So value={name} reads the current text from state, and onChangeText={setName} writes every keystroke back to state.

In this pattern data flows from a single source: the state. The display is always a reflection of the state. This builds a consistent structure for validation and synchronization. In this lesson we will see how to set up a controlled TextInput.

Value and state flow

The controlled pattern is set up like this: first define the state with const [name, setName] = useState("");. Then bind both props with <TextInput value={name} onChangeText={setName} />.

The flow: when the user types, onChangeText calls setName, the state updates, the component re-renders, and value={name} shows the latest text. If you omit the value prop, onChangeText still fires but the field stays uncontrolled; the value is not held by you.

Exercise Set up a controlled TextInput

Import useState from react and TextInput from react-native. Create a name state (initial empty string). Make the <TextInput> controlled: include both value={name} and onChangeText={setName} props.

Show example solution

import { useState } from "react";
import { TextInput, View } from "react-native";

function App() {
  const [name, setName] = useState("");
  return (
    <View>
      <TextInput value={name} onChangeText={setName} />
    </View>
  );
}

Test yourself

What does controlled input mean?
```
<TextInput value={name} onChangeText={setName} />
```
- Value comes from state
- It is read-only
- No state is used
- Value stays fixed
Show answer

Value comes from state — In a controlled input the value comes from a state.
Match the controlled flow

User types

onChangeText fires
setName

Updates state
Re-render

value refreshes
value={name}

Reads from state

The value prop

<TextInput ____={name} onChangeText={setName} />

Show answer

<TextInput value={name} onChangeText={setName} />

Next lesson: placeholder

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies