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('').