TextInput with controlled state in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the output when typing in this controlled TextInput?

Consider this React Native component with a controlled TextInput. What will the Text below display as you type?

React Native

import React, { useState } from 'react';
import { View, TextInput, Text } from 'react-native';

export default function App() {
  const [text, setText] = useState('');
  return (
    <View>
      <TextInput
        value={text}
        onChangeText={setText}
        placeholder="Type here"
      />
      <Text>{text}</Text>
    </View>
  );
}

A The Text below shows the reversed input text.

B The Text below remains empty no matter what you type.

C The Text below shows exactly what you type in real time.

D The Text below shows the input text but only after you press Enter.

💡 Hint

Think about how the value and onChangeText props work together in a controlled input.

Because the TextInput's value is tied to the text state, and onChangeText updates that state, the Text below updates immediately as you type.

📝 Syntax

intermediate

Which option correctly updates state on TextInput change?

Which code snippet correctly updates the state when the user types in a controlled TextInput?

A <TextInput value={text} onChangeText={(text) => setText(text)} />

B <TextInput value={text} onChangeText={(e) => setText(e.target.value)} />

C <TextInput value={text} onChange={(e) => setText(e.nativeEvent.text)} />

D <TextInput value={text} onChangeText={setText} />

💡 Hint

Remember that onChangeText receives the new text string directly, not an event object.

In React Native, onChangeText passes the new text string directly, so the handler should accept that string and update state. Options A and D do this correctly.

❓ lifecycle

advanced

What happens if you omit the value prop in a controlled TextInput?

In a controlled TextInput, what is the effect of removing the value prop but keeping onChangeText?

React Native

import React, { useState } from 'react';
import { TextInput } from 'react-native';

export default function App() {
  const [text, setText] = useState('');
  return <TextInput onChangeText={setText} placeholder="Type here" />;
}

A The TextInput becomes uncontrolled and user input is visible but state is updated.

B The TextInput will not accept any input and appears disabled.

C The app crashes with a runtime error about missing value prop.

D The TextInput shows the last typed value but does not update state.

💡 Hint

Think about controlled vs uncontrolled inputs and what happens when value is missing.

Without the value prop, the TextInput is uncontrolled. It shows user input normally, but since onChangeText updates state, the state changes but does not control the input display.

🔧 Debug

advanced

Why does this controlled TextInput not update the displayed text?

Given this code, why does the TextInput not show what the user types?

React Native

import React, { useState } from 'react';
import { TextInput } from 'react-native';

export default function App() {
  const [text, setText] = useState('');
  return <TextInput value={text} onChangeText={() => setText('')} placeholder="Type here" />;
}

A Because <code>onChangeText</code> resets state to empty string on every change.

B Because <code>value</code> is not set to the state variable.

C Because <code>onChangeText</code> is missing the event parameter.

D Because the placeholder text overrides the input value.

💡 Hint

Look at what onChangeText does to the state on every input.

The onChangeText handler sets the state to an empty string every time the user types, so the input always shows empty.

🧠 Conceptual

expert

What is the main benefit of using controlled TextInput components?

Why do developers prefer controlled TextInput components over uncontrolled ones in React Native?

A They automatically improve app performance by reducing re-renders.

B They prevent the user from typing invalid characters by default.

C They enable the keyboard to show special keys automatically without extra code.

D They allow the app to have full control over the input value and validation in real time.

💡 Hint

Think about how state and UI stay in sync with controlled inputs.

Controlled inputs let the app manage the input value through state, enabling real-time validation, formatting, and consistent UI updates.