Form validation patterns in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a state variable for the email input using React Native hooks.

React Native

const [email, [1]] = useState('');

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

AupdateEmail

BemailSet

CsetEmail

DchangeEmail

Attempts:

3 left

💡 Hint

Common Mistakes

Using a function name that does not start with 'set' can confuse the code and cause errors.

In React Native, useState returns a pair: the current state and a function to update it. The convention is to name the updater function starting with 'set'.

2fill in blank

medium

Complete the code to check if the email input contains an '@' symbol for basic validation.

React Native

const isValidEmail = email.includes([1]);

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

A'#'

B'@'

C'$'

D'!'

Attempts:

3 left

💡 Hint

Common Mistakes

Using characters other than '@' will not correctly validate the email.

Checking if the email contains '@' is a simple way to validate email format.

3fill in blank

hard

Fix the error in the code to update the password state when the input changes.

React Native

<TextInput value={password} onChangeText=[1] />

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

Apassword

BupdatePassword

Cpassword()

DsetPassword

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the state variable instead of the updater function causes the input not to update.

The onChangeText prop expects a function that updates the state. 'setPassword' is the correct updater function.

4fill in blank

hard

Fill both blanks to create a simple validation that checks if the password length is at least 8 characters.

React Native

const isPasswordValid = password.length [1] [2];

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

A>=

B<

C8

D10

Attempts:

3 left

💡 Hint

Common Mistakes

Using '<' instead of '>=' reverses the logic and causes wrong validation.

To check if password length is at least 8, use 'password.length >= 8'.

5fill in blank

hard

Fill all three blanks to create an object that stores validation errors for email and password.

React Native

const errors = { email: [1], password: [2], isValid: [3] };

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

A''

Bnull

Cfalse

Dtrue

Attempts:

3 left

💡 Hint

Common Mistakes

Using null instead of empty strings can cause UI issues displaying errors.

Empty strings '' mean no error messages for email and password. 'false' means the form is not valid yet.