Why form handling captures user data in React Native - Build It to Prove It

Build: User Info Form

A simple form screen that captures user name and email input and shows the entered data below the form.

Target UI

-------------------------
| User Info Form        |
|-----------------------|
| Name: [___________]   |
| Email: [___________]  |
| [Submit]             |
|                       |
| Entered Name:         |
| Entered Email:        |
-------------------------

Two TextInput fields: one for name, one for email

A Submit button that when pressed shows the entered name and email below

Use React Native state to capture and display user input

Clear the input fields after submission

Starter Code

React Native

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

export default function UserInfoForm() {
  // TODO: Add state variables for name and email

  // TODO: Add handler for Submit button

  return (
    <View style={styles.container}>
      <Text style={styles.title}>User Info Form</Text>
      <Text>Name:</Text>
      <TextInput style={styles.input} placeholder="Enter name" />
      <Text>Email:</Text>
      <TextInput style={styles.input} placeholder="Enter email" keyboardType="email-address" />
      <Button title="Submit" onPress={() => {}} />
      {/* TODO: Display entered name and email here */}
    </View>
  );
}

const styles = StyleSheet.create({
  container: { padding: 20 },
  title: { fontSize: 20, marginBottom: 10 },
  input: { borderWidth: 1, borderColor: '#ccc', padding: 8, marginBottom: 10 }
});

Task 1

Task 2

Task 3

Task 4

Solution

React Native

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

export default function UserInfoForm() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [submittedName, setSubmittedName] = useState('');
  const [submittedEmail, setSubmittedEmail] = useState('');

  const handleSubmit = () => {
    setSubmittedName(name);
    setSubmittedEmail(email);
    setName('');
    setEmail('');
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>User Info Form</Text>
      <Text>Name:</Text>
      <TextInput
        style={styles.input}
        placeholder="Enter name"
        value={name}
        onChangeText={setName}
        accessibilityLabel="Name input"
      />
      <Text>Email:</Text>
      <TextInput
        style={styles.input}
        placeholder="Enter email"
        keyboardType="email-address"
        value={email}
        onChangeText={setEmail}
        accessibilityLabel="Email input"
      />
      <Button title="Submit" onPress={handleSubmit} accessibilityLabel="Submit button" />
      <View style={{ marginTop: 20 }}>
        <Text>Entered Name: {submittedName}</Text>
        <Text>Entered Email: {submittedEmail}</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { padding: 20 },
  title: { fontSize: 20, marginBottom: 10 },
  input: { borderWidth: 1, borderColor: '#ccc', padding: 8, marginBottom: 10 }
});

This form uses React Native's useState to keep track of what the user types in the name and email fields. When the user presses the Submit button, the current input values are saved to separate state variables (submittedName and submittedEmail) which are then shown below the form. The input fields are cleared to give a fresh start. This shows how form handling captures user data by storing input in state and using it to update the UI.

Final Result

Completed Screen

-------------------------
| User Info Form        |
|-----------------------|
| Name: [             ] |
| Email: [            ] |
| [Submit]             |
|                       |
| Entered Name: Alice   |
| Entered Email: [e-mail] |
-------------------------

User types name and email in the text fields

User taps Submit button

Entered name and email appear below the button

Input fields clear after submission

Stretch Goal

Add validation to show an alert if name or email is empty when submitting

💡 Hint

Use simple if checks in handleSubmit and React Native's Alert.alert to show messages

Practice

1. Why do we use state variables when handling forms in React Native?

easy

A. To store and update the user input dynamically

B. To style the form components

C. To navigate between screens

D. To fetch data from the internet

Solution

1. Step 1: Understand the role of state in forms

   State variables hold the current value typed by the user in the form fields.

2. Step 2: Recognize dynamic updates

   State updates as the user types, so the app always has the latest input data.

3. Final Answer:

   To store and update the user input dynamically -> Option A

4. Quick Check:

   State holds user input live for forms [OK]

Hint: State holds user input live for forms [OK]

Common Mistakes:

• Thinking state is for styling
• Confusing state with navigation
• Assuming state fetches data automatically

2. Which of the following is the correct way to update a state variable named name when user types in a TextInput?

easy

A. onInput={(text) => setName(text)}

B. onChange={(text) => setName(text)}

C. onTextChange={(text) => setName(text)}

D. onChangeText={(text) => setName(text)}

Solution

1. Step 1: Identify the correct event prop for TextInput

   React Native uses onChangeText to capture text changes.

2. Step 2: Match the syntax to update state

   The function setName is called with the new text value.

3. Final Answer:

   onChangeText={(text) => setName(text)} -> Option D

4. Quick Check:

   Use onChangeText to update input state [OK]

Hint: Use onChangeText to update input state [OK]

Common Mistakes:

• Using onChange instead of onChangeText
• Using wrong event names like onTextChange
• Not passing the text parameter correctly

3. What will be displayed on screen after typing 'Hello' in this React Native form snippet?

const [text, setText] = useState('');
return (
  <>
    
    You typed: {text}
  </>
);

medium

A. You typed: Hello

B. You typed:

C. You typed: undefined

D. You typed: null

Solution

1. Step 1: Understand state update on typing

   Typing 'Hello' triggers setText to update text to 'Hello'.

2. Step 2: Check displayed text

   The Text component shows 'You typed: ' plus the current text value.

3. Final Answer:

   You typed: Hello -> Option A

4. Quick Check:

   Text shows current state value typed by user [OK]

Hint: Text shows current state value typed by user [OK]

Common Mistakes:

• Expecting empty or undefined text after typing
• Not linking TextInput value to state
• Forgetting to update state on text change

4. Identify the error in this React Native form code:

const [email, setEmail] = useState('');
return (
  
);

medium

A. useState must be called inside the TextInput

B. value should not be set for controlled inputs

C. onChangeText should be a function, not a state variable

D. setEmail should be passed as value

Solution

1. Step 1: Check onChangeText prop usage

   It must be a function to update state, but here it is the state variable email.

2. Step 2: Understand correct usage

   We should pass setEmail to onChangeText to update the state.

3. Final Answer:

   onChangeText should be a function, not a state variable -> Option C

4. Quick Check:

   onChangeText must be a function to update state [OK]

Hint: onChangeText must be a function to update state [OK]

Common Mistakes:

• Passing state variable instead of setter function
• Removing value prop for controlled input
• Misplacing useState call

5. You want to capture user input from two fields, username and password, and show a message only when both are filled. Which approach correctly handles this in React Native?

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

// What should onChangeText for username be?
// And how to check if both fields are filled?

hard

A. Use separate states for each field and check username || password

B. Use onChangeText={text => setForm({...form, username: text})} and check form.username && form.password

C. Use onChangeText={setForm} and check form.username === ''

D. Use onChangeText={text => setForm(text)} and check form.length > 0

Solution

1. Step 1: Update nested state correctly

   Use spread operator to keep other fields and update only username: setForm({...form, username: text}).

2. Step 2: Check both fields are filled

   Check if both form.username and form.password are truthy (not empty strings).

3. Final Answer:

   Use onChangeText={text => setForm({...form, username: text})} and check form.username && form.password -> Option B

4. Quick Check:

   Use spread to update form object and check both fields [OK]

Hint: Use spread to update form object and check both fields [OK]

Common Mistakes:

• Overwriting whole form state instead of merging
• Using OR instead of AND to check fields
• Passing wrong function to onChangeText