TextInput component in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the output of this TextInput behavior?

Consider this React Native code snippet. What will the TextInput display after typing 'Hello' and then deleting the last letter?

React Native

import React, { useState } from 'react';
import { TextInput, View, 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 TextInput shows 'Hell' and the Text below also shows 'Hell'.

B The TextInput shows 'Hello' but the Text below shows 'Hell'.

C The TextInput and Text below both show 'Hello'.

D The TextInput shows 'Hell' but the Text below shows 'Hello'.

💡 Hint

The TextInput's value is controlled by the state variable 'text'. When you delete a letter, the state updates accordingly.

The TextInput is controlled by the 'text' state. When you delete the last letter, the state updates to 'Hell', so both the input and the Text component show 'Hell'.

📝 Syntax

intermediate

Which option correctly sets a placeholder in TextInput?

You want to show a placeholder text 'Enter name' inside a TextInput. Which code snippet does this correctly?

A <TextInput placeholderText='Enter name' />

B <TextInput placeHolder='Enter name' />

C <TextInput placeholder='Enter name' />

D <TextInput placeholder-text='Enter name' />

💡 Hint

React Native uses camelCase props. Check the exact spelling of 'placeholder'.

The correct prop name is 'placeholder' all lowercase. Other variants like 'placeHolder' or 'placeholderText' are invalid and won't work.

❓ lifecycle

advanced

What happens when you set TextInput's editable prop to false?

If you set , what is the behavior of the input field?

A The TextInput becomes read-only; user cannot type or edit text.

B The TextInput disables only the placeholder text.

C The TextInput clears its content automatically.

D The TextInput hides the keyboard but still allows text editing.

💡 Hint

Think about what 'editable' means for a text input field.

Setting editable to false disables user interaction with the TextInput, making it read-only.

❓ navigation

advanced

How to dismiss the keyboard when pressing a button after typing in TextInput?

You have a TextInput and a Button. After typing, you want the keyboard to hide when the button is pressed. Which code snippet achieves this?

React Native

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

export default function App() {
  const [text, setText] = useState('');
  return (
    <View>
      <TextInput value={text} onChangeText={setText} />
      <Button title="Submit" onPress={() => { /* What to do here? */ }} />
    </View>
  );
}

A onPress={() => TextInput.blur()}

B onPress={() => Keyboard.dismiss()}

C onPress={() => setText('')}

D onPress={() => Keyboard.show()}

💡 Hint

There is a Keyboard API in React Native to control the keyboard.

Keyboard.dismiss() hides the keyboard. Calling it inside onPress will close the keyboard when the button is pressed.

🔧 Debug

expert

Why does this TextInput not update the displayed text?

Look at this code. The user types but the TextInput does not show the typed text. What is the cause?

React Native

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

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

A The TextInput is missing a style, so text is invisible.

B The value prop is missing, so TextInput is uncontrolled.

C The placeholder prop is incorrectly used, causing no text display.

D The onChangeText handler resets text to empty string, so input never updates.

💡 Hint

Check what the onChangeText function does with the input value.

The onChangeText callback ignores the input and always sets text to empty string, so the input never shows typed characters.

Practice

1. What is the main purpose of the TextInput component in React Native?

easy

A. To display images

B. To create buttons

C. To let users type text in the app

D. To navigate between screens

Solution

1. Step 1: Understand the role of TextInput

   The TextInput component is designed to allow users to enter text data in the app interface.

2. Step 2: Compare with other components

   Other options like displaying images or creating buttons are done by different components, not TextInput.

3. Final Answer:

   To let users type text in the app -> Option C

4. Quick Check:

   TextInput = user text entry [OK]

Hint: TextInput is for typing text only [OK]

Common Mistakes:

• Confusing TextInput with Image or Button components
• Thinking TextInput handles navigation
• Assuming TextInput displays static content

2. Which of the following is the correct way to update the text state when using TextInput?

easy

A. setText(text)} value={text} />

B. setText(text)} value={text} />

C. setText(text)} value={text} />

D. setText(text)} />

Solution

1. Step 1: Identify the correct event prop for text change

   The correct prop to handle text changes in TextInput is onChangeText.

2. Step 2: Check the syntax for updating state

   The function should receive the new text and call the state setter like setText(text).

3. Final Answer:

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

4. Quick Check:

   Use onChangeText to update state [OK]

Hint: Use onChangeText, not onChange or others [OK]

Common Mistakes:

• Using onChange instead of onChangeText
• Using wrong prop names like onTextChange
• Not passing the text parameter correctly

3. What will be displayed when the following code runs?

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

return (
  <TextInput
    value={text}
    onChangeText={setText}
    placeholder="Type here"
  />
);

medium

A. An input box showing 'Type here' as text

B. An input box showing 'Hello' with placeholder 'Type here'

C. An empty input box with placeholder 'Type here'

D. A blank screen with no input box

Solution

1. Step 1: Check initial state value

   The state variable text is initialized with 'Hello', so the input shows this text.

2. Step 2: Understand placeholder behavior

   The placeholder text 'Type here' only shows when the input is empty, but here the input has 'Hello'.

3. Final Answer:

   An input box showing 'Hello' with placeholder 'Type here' -> Option B

4. Quick Check:

   Value overrides placeholder if not empty [OK]

Hint: Value text shows over placeholder if not empty [OK]

Common Mistakes:

• Thinking placeholder text shows even if value exists
• Confusing placeholder with default value
• Expecting empty input when state has text

4. Identify the error in this code snippet:

const [input, setInput] = React.useState('');

return (
  <TextInput
    value={input}
    onChange={(text) => setInput(text)}
  />
);

medium

A. setInput should not be called inside onChange

B. Missing value prop

C. State variable should be named text

D. Using onChange instead of onChangeText

Solution

1. Step 1: Check event handler prop name

   The TextInput component uses onChangeText to handle text changes, not onChange.

2. Step 2: Confirm other props are correct

   The value prop is present and state usage is correct.

3. Final Answer:

   Using onChange instead of onChangeText -> Option D

4. Quick Check:

   Use onChangeText for text input changes [OK]

Hint: Remember: onChangeText, not onChange [OK]

Common Mistakes:

• Using onChange instead of onChangeText
• Forgetting to pass value prop
• Misnaming state variables

5. You want to create a controlled TextInput that clears its text when the user submits. Which approach is correct?

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

return (
  <TextInput
    value={text}
    onChangeText={setText}
    onSubmitEditing={() => setText('')}
    placeholder="Enter text"
  />
);

hard

A. This code clears the input text on submit correctly

B. onSubmitEditing should update state with current text, not empty

C. Need to use onEndEditing instead of onSubmitEditing

D. Cannot clear text on submit with controlled TextInput

Solution

1. Step 1: Understand controlled TextInput behavior

   The input text is controlled by the text state and updated by onChangeText.

2. Step 2: Check onSubmitEditing handler

   The onSubmitEditing callback sets the text state to empty string, clearing the input on submit.

3. Final Answer:

   This code clears the input text on submit correctly -> Option A

4. Quick Check:

   onSubmitEditing can clear controlled input [OK]

Hint: Use onSubmitEditing to reset state for clearing input [OK]

Common Mistakes:

• Using wrong event like onEndEditing
• Trying to clear input without updating state
• Assuming uncontrolled input clears automatically