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