</>SkillRecallRECALL WHAT YOU KNOW
Sign in
Explore Library
React NativeForms & User Input Handling

39 items

1

Multiple Fields in One State Object

Code Quiz
2

keyboardType for Email Input

Code Quiz
3

autoCapitalize and autoCorrect Config

Code Quiz
4

returnKeyType and onSubmitEditing

Code Quiz
5

KeyboardAvoidingView for Form Layout

Code Quiz
6

Uncontrolled Input via Ref

Code Quiz
7

Focusing the Next Input via Ref

Code Quiz
8

Formik for Form State

Flashcard
9

Client-Side Form Validation

Flashcard
10

maxLength and Character Count

Flashcard
11

onFocus and onBlur Events

Flashcard
12

Picker and Selection Inputs

Flashcard
13

React Hook Form with Controller

Flashcard
14

Common TextInput Props

Flashcard
15

Multiline TextInput

Flashcard
16

Handling Submission and Disabling

Flashcard
17

Input Masking and Formatting

Flashcard
18

Debouncing Input

Flashcard
19

Schema Validation with Yup/Zod

Flashcard
20

Focus Management with Refs

Flashcard
21

Multi-Field Form State with useState

Flashcard
22

Displaying Validation Errors

Flashcard
23

returnKeyType and onSubmitEditing

Flashcard
24

Placeholder Text and Color

Flashcard
25

Clearing and Resetting Fields

Flashcard
26

Controlled Inputs in React Native

Flashcard
27

Phone Number Masking Bug

Code Quiz
28

Placeholder Used as Initial Value

Code Quiz
29

Multiline TextInput Not Expanding

Code Quiz
30

Controlled Picker Won't Update

Code Quiz
31

blurOnSubmit Keeping Keyboard Open

Code Quiz
32

Tap Outside to Dismiss Keyboard

Code Quiz
33

Character Count with maxLength

Code Quiz
34

Tracking Focus State of an Input

Code Quiz
35

Disabling Submit Until Valid

Code Quiz
36

Rendering a Validation Error Message

Code Quiz
37

Validating an Email Field

Code Quiz
38

Listening for Keyboard Show Event

Code Quiz
39

Dismiss Keyboard on Button Press

Code Quiz
Code QuizIntermediate

Multiple Fields in One State Object

Updating one field accidentally wipes out the others in a shared state object.

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

  return (
    <View>
      <TextInput
        value={form.email}
        onChangeText={(text) => setForm({ email: text })}
      />
      <TextInput
        value={form.password}
        onChangeText={(text) => setForm({ password: text })}
      />
    </View>
  );
}

What is the bug in these onChangeText handlers?