TextInput component in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a basic TextInput that updates the state on text change.

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=[1]
        placeholder="Type here"
      />
      <Text>You typed: {text}</Text>
    </View>
  );
}

Drag options to blanks, or click blank then click option'

AsetText

Btext

ConChangeText

DsetState

Attempts:

3 left

💡 Hint

Common Mistakes

Using the state variable 'text' instead of the setter function.

Using 'setState' which is not defined in functional components.

The onChangeText prop expects a function to update the state. Here, setText updates the text state.

2fill in blank

medium

Complete the code to make the TextInput secure for password entry.

React Native

<TextInput
  placeholder="Enter password"
  [1]={true}
/>

Drag options to blanks, or click blank then click option'

AsecureTextEntry

Bpassword

CisSecure

Dsecure

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'password' or 'isSecure' which are not valid props.

Forgetting to set the prop to true.

The prop secureTextEntry={true} makes the TextInput hide the entered text for passwords.

3fill in blank

hard

Fix the error in the code to correctly update the text state when typing.

React Native

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

<TextInput
  value={input}
  onChangeText={(text) => [1]
  placeholder="Enter text"
/>

Drag options to blanks, or click blank then click option'

Ainput = text

BsetInput = text

CsetInput(text)

Dinput(text)

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to assign directly to the state variable.

Using incorrect syntax like setInput = text.

To update state, call the setter function setInput with the new text value.

4fill in blank

hard

Fill both blanks to create a controlled TextInput that updates state and shows placeholder text.

React Native

const [name, setName] = useState('');

<TextInput
  value=[1]
  onChangeText=[2]
  placeholder="Enter your name"
/>

Drag options to blanks, or click blank then click option'

Aname

BsetName

Ctext

Dinput

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up state variable and setter function.

Using undefined variables like 'text' or 'input'.

The value prop should be the state variable 'name', and onChangeText should be the setter 'setName'.

5fill in blank

hard

Fill all three blanks to create a TextInput that updates state, has a placeholder, and limits max length to 10.

React Native

const [code, setCode] = useState('');

<TextInput
  value=[1]
  onChangeText=[2]
  placeholder=[3]
  maxLength={10}
/>

Drag options to blanks, or click blank then click option'

Acode

BsetCode

C"Enter code"

D"Type here"

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong placeholder text or missing quotes.

Mixing up value and setter names.

Use 'code' as value, 'setCode' as onChangeText, and placeholder text 'Enter code'.

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