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.

Practice

1. What does it mean when a TextInput in React Native is "controlled"?

easy

A. The input value is managed by React state using value and onChangeText.

B. The input automatically saves data to a database.

C. The input cannot be edited by the user.

D. The input uses default native keyboard settings only.

Solution

1. Step 1: Understand controlled input concept

   A controlled TextInput means React state holds the current text value.

2. Step 2: Identify how React manages input

   React uses value prop to set input text and onChangeText to update state on typing.

3. Final Answer:

   The input value is managed by React state using value and onChangeText. -> Option A

4. Quick Check:

   Controlled input = React state control [OK]

Hint: Controlled means React state controls input text [OK]

Common Mistakes:

• Thinking controlled means input is read-only
• Confusing controlled with auto-saving
• Assuming native keyboard controls the value

2. Which of the following is the correct way to create a controlled TextInput in React Native?

easy

A. <TextInput value={text} onChange={setText} />

B. <TextInput value={text} onChangeText={setText} />

C. <TextInput defaultValue={text} onChange={setText} />

D. <TextInput defaultValue={text} onChangeText={text} />

Solution

1. Step 1: Identify correct props for controlled input

   The value prop sets the input text, and onChangeText updates state on typing.

2. Step 2: Check each option's syntax

   <TextInput value={text} onChangeText={setText} /> uses value and onChangeText correctly. Others misuse onChange or defaultValue.

3. Final Answer:

   <TextInput value={text} onChangeText={setText} /> -> Option B

4. Quick Check:

   Use value + onChangeText for controlled input [OK]

Hint: Use value and onChangeText props for controlled TextInput [OK]

Common Mistakes:

• Using onChange instead of onChangeText
• Using defaultValue for controlled input
• Passing wrong handler to onChangeText

3. What will be displayed inside the TextInput after typing "Hi" in this code?

const [text, setText] = React.useState('');

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

medium

A. The input will show "undefined".

B. The input will remain empty.

C. The input will show "Hi" as typed.

D. The input will show "" (empty string) always.

Solution

1. Step 1: Understand state updates on typing

   Typing "Hi" triggers onChangeText which calls setText to update state to "Hi".

2. Step 2: Value prop reflects state

   The value prop uses text state, so input shows "Hi" as typed.

3. Final Answer:

   The input will show "Hi" as typed. -> Option C

4. Quick Check:

   State updates input value = typed text [OK]

Hint: Value prop shows current state text instantly [OK]

Common Mistakes:

• Thinking input won't update without defaultValue
• Confusing onChangeText with onChange
• Assuming input clears after typing

4. Identify the error in this controlled TextInput code:

const [text, setText] = React.useState('');

<TextInput value={text} onChange={setText} />

medium

A. Using onChange instead of onChangeText causes no updates.

B. State should be initialized with null, not empty string.

C. Missing defaultValue prop causes error.

D. The value prop should be omitted for controlled input.

Solution

1. Step 1: Check event handler prop

   TextInput uses onChangeText for text changes, not onChange.

2. Step 2: Effect of wrong handler

   Using onChange means setText never runs, so state stays empty and input doesn't update.

3. Final Answer:

   Using onChange instead of onChangeText causes no updates. -> Option A

4. Quick Check:

   Use onChangeText, not onChange, for TextInput [OK]

Hint: Use onChangeText, not onChange, for TextInput updates [OK]

Common Mistakes:

• Confusing onChange with onChangeText
• Thinking defaultValue is required for controlled input
• Removing value prop breaks control

5. You want to create a controlled TextInput that only accepts uppercase letters. Which code snippet correctly implements this behavior?

hard

A. const [text, setText] = React.useState('');

<TextInput
value={text}
onChangeText={t => setText(t.toLowerCase())}
/>

B. const [text, setText] = React.useState('');

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

C. const [text, setText] = React.useState('');

<TextInput
defaultValue={text.toUpperCase()}
onChangeText={setText}
/>

D. const [text, setText] = React.useState('');

<TextInput
value={text}
onChangeText={t => setText(t.toUpperCase())}
/>

Solution

1. Step 1: Understand uppercase enforcement

   To force uppercase, transform input text to uppercase before saving state.

2. Step 2: Check each option's logic

   const [text, setText] = React.useState('');
   
   <TextInput
     value={text}
     onChangeText={t => setText(t.toUpperCase())}
   />

   converts input to uppercase in onChangeText before calling setText.

   const [text, setText] = React.useState('');
   
   <TextInput
     value={text.toUpperCase()}
     onChangeText={setText}
   />

   only uppercases value but stores raw input, so user can type lowercase.

   const [text, setText] = React.useState('');
   
   <TextInput
     defaultValue={text.toUpperCase()}
     onChangeText={setText}
   />

   uses defaultValue which is uncontrolled.

   const [text, setText] = React.useState('');
   
   <TextInput
     value={text}
     onChangeText={t => setText(t.toLowerCase())}
   />

   converts to lowercase, opposite of requirement.

3. Final Answer:

   <TextInput value={text} onChangeText={t => setText(t.toUpperCase())} /> -> Option D

4. Quick Check:

   Transform input in onChangeText for controlled uppercase [OK]

Hint: Transform text in onChangeText before setting state [OK]

Common Mistakes:

• Trying to uppercase value prop only
• Using defaultValue instead of value
• Transforming text to lowercase by mistake