Explore Library
ReactForms & Controlled Inputs

74 items

1

Controlled Radio Group

Code Quiz
2

Resetting Form State After Submit

Code Quiz
3

Controlled vs Default Values

Slides / Video
4

Displaying Validation Errors and Feedback

Slides / Video
5

Client-Side Form Validation

Slides / Video
6

Form Submission and preventDefault

Slides / Video
7

Handling Radio Button Groups

Slides / Video
8

Handling Checkboxes in React

Slides / Video
9

Handling Select and Multi-Select Dropdowns

Slides / Video
10

Handling Textarea Elements in React

Slides / Video
11

Multiple Inputs, One State Object

Slides / Video
12

Handling onChange Events for Inputs

Slides / Video
13

Binding Input Value to State

Slides / Video
14

Controlled vs Uncontrolled Trade-offs

Slides / Video
15

Uncontrolled Components with Refs

Slides / Video
16

Controlled Components Concept

Slides / Video
17

Form Accessibility in React

Slides / Video
18

Debouncing Input Changes

Slides / Video
19

Disabling Submit and Form State

Slides / Video
20

Dynamic and Array-Based Form Fields

Slides / Video
21

Handling File Inputs in React

Slides / Video
22

Controlled Inputs and Re-renders

Quiz
23

Resetting Form State After Submit

Quiz
24

Disabling Submit Based on State

Quiz
25

Number Inputs and Type Coercion

Quiz
26

File Inputs Are Uncontrolled

Quiz
27

Uncontrolled Inputs with useRef

Quiz
28

Avoiding null Value Warnings

Quiz
29

value vs defaultValue Warning

Quiz
30

Displaying Validation Error Messages

Quiz
31

Basic Form Validation Logic

Quiz
32

Form Submission and preventDefault

Quiz
33

Consolidating Form State into an Object

Quiz
34

One Handler for Many Inputs

Quiz
35

Textarea value vs children

Quiz
36

Controlled Select Elements

Quiz
37

Handling Radio Button Groups

Quiz
38

Controlled Checkbox Inputs

Quiz
39

Reading Input via event.target.value

Quiz
40

Controlled Input Binding Basics

Quiz
41

Number Input Value Coercion

Code Quiz
42

Immutable Update of Nested State

Code Quiz
43

Validation Never Flags Empty Input

Code Quiz
44

Error Message Renders a Zero

Code Quiz
45

Reading a Multi-Select Value

Code Quiz
46

Controlled-to-Uncontrolled Warning

Code Quiz
47

Submit Button Disabled Logic

Code Quiz
48

Controlled Input Won't Update

Code Quiz
49

Reading an Uncontrolled Input Ref

Code Quiz
50

Form Submit Reloads the Page

Code Quiz
51

Form State as an Object

Code Quiz
52

Controlled Text Input Basics

Code Quiz
53

Reading the Event Value

Code Quiz
54

Controlled Checkbox Toggle

Code Quiz
55

Controlled Select Dropdown

Code Quiz
56

Controlled Textarea

Code Quiz
57

One Handler for Many Inputs

Code Quiz
58

Debouncing Controlled Input Updates

Flashcard
59

Never Pass Undefined as Value

Flashcard
60

Preventing Cursor Jump in Inputs

Flashcard
61

File Inputs Must Be Uncontrolled

Flashcard
62

Number Inputs and Type Coercion

Flashcard
63

Controlled Checkbox

Flashcard
64

Disabling the Submit Button

Flashcard
65

Controlled Select Elements

Flashcard
66

Basic Validation and Error State

Flashcard
67

Form Submission and preventDefault

Flashcard
68

Reading event.target.value

Flashcard
69

Dynamic Handler via name Attribute

Flashcard
70

Controlled Radio Buttons

Flashcard
71

Controlled Multi-Select

Flashcard
72

Controlled Input Fundamentals

Flashcard
73

Multiple Inputs, One State Object

Flashcard
74

Controlled Textarea

Flashcard
Code QuizIntermediate

Controlled Input Won't Update

Spot why this controlled-style input never reflects typed changes.

Codejavascript
function SearchBox() {
  const [query, setQuery] = useState('');

  return (
    <input
      defaultValue={query}
      onChange={(e) => setQuery(e.target.value)}
    />
  );
}

Why doesn't this input stay in sync with the query state?