Why form handling captures user data in React Native - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to capture user input in a React Native TextInput.

React Native

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

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

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

AhandleChange

Bname

CsetName

DgetName

Attempts:

3 left

💡 Hint

Common Mistakes

Using the state variable instead of the setter function.

Passing a function name that is not defined.

The onChangeText prop expects a function to update the state. setName updates the name state with user input.

2fill in blank

medium

Complete the code to handle form submission and log the captured data.

React Native

const handleSubmit = () => {
  console.log('User name:', [1]);
};

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

Aname

BsetName

ChandleSubmit

DuserName

Attempts:

3 left

💡 Hint

Common Mistakes

Using the setter function instead of the state variable.

Using an undefined variable.

The name variable holds the current user input captured from the form.

3fill in blank

hard

Fix the error in the code to correctly update multiple form fields in state.

React Native

const [form, setForm] = useState({ email: '', password: '' });

const handleEmailChange = (text) => {
  setForm({ ...form, [1]: text });
};

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

Apassword

Bemail

Ctext

Dform

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong key like 'password' when updating email.

Using a variable name instead of a key string.

To update the email field in the form state, use the key email in the object spread.

4fill in blank

hard

Fill both blanks to create a controlled TextInput for password with secure entry.

React Native

<TextInput value={form.[1] onChangeText={(text) => setForm({ ...form, [2]: text })} secureTextEntry={true} placeholder="Password" />

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

Apassword

Bemail

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up 'email' and 'password' keys.

Not matching the value and update keys.

The value and the key in setForm must both be password to keep the input controlled and update the correct field.

5fill in blank

hard

Fill all three blanks to create a form submission handler that prevents default, logs data, and resets form.

React Native

const handleSubmit = (event) => {
  event.[1]();
  console.log('Form data:', [2]);
  setForm({ [3] });
};

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

ApreventDefault

Bform

Cemail: '', password: ''

DstopPropagation

Attempts:

3 left

💡 Hint

Common Mistakes

Using stopPropagation instead of preventDefault.

Logging the setter function instead of form data.

Not resetting form fields properly.

Calling preventDefault() stops the page reload. Logging form shows the data. Resetting form clears the fields.