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