TextInput with controlled state in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

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=[1]
        placeholder="Type here"
      />
    </View>
  );
}

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

AsetText

Btext

CuseState

DonChange

Attempts:

3 left

💡 Hint

Common Mistakes

Using the state variable text instead of the setter function.

Using onChange instead of onChangeText.

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

2fill in blank

medium

Complete the code to initialize the state with the string 'Hello'.

React Native

const [text, setText] = useState([1]);

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

A""

B"Hello"

Cnull

Dundefined

Attempts:

3 left

💡 Hint

Common Mistakes

Using empty string instead of 'Hello'.

Using null or undefined which are not strings.

The initial state should be the string "Hello" to start the TextInput with that text.

3fill in blank

hard

Fix the error in the TextInput by completing the code to make it controlled.

React Native

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

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

Atext

BsetText

Cinput

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Using the setter function setText as the value.

Using an undefined variable.

The value prop must be the state variable text to make the TextInput controlled.

4fill in blank

hard

Fill both blanks to create a controlled TextInput that updates the state and shows the current text below.

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

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

Atext

BsetText

Cinput

DonChange

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping the value and onChangeText props.

Using undefined variables.

The value prop should be the state variable text, and onChangeText should be the setter function setText to update the state.

5fill in blank

hard

Fill all three blanks to create a controlled TextInput that updates the state, shows the text, and clears it on button press.

React Native

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

export default function App() {
  const [text, setText] = useState('');

  return (
    <View>
      <TextInput
        value=[1]
        onChangeText=[2]
        placeholder="Type here"
      />
      <Text>{text}</Text>
      <Button title="Clear" onPress={() => [3] />
    </View>
  );
}

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

Atext

BsetText

CsetText('')

Dtext = ''

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to assign directly to the state variable.

Not using the setter function to clear the text.

The TextInput's value is the state text, onChangeText updates the state with setText, and the button clears the text by calling setText('').

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