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

value vs defaultValue Warning

Quiz
23

Displaying Validation Error Messages

Quiz
24

Basic Form Validation Logic

Quiz
25

Form Submission and preventDefault

Quiz
26

Consolidating Form State into an Object

Quiz
27

One Handler for Many Inputs

Quiz
28

Textarea value vs children

Quiz
29

Controlled Select Elements

Quiz
30

Handling Radio Button Groups

Quiz
31

Controlled Checkbox Inputs

Quiz
32

Reading Input via event.target.value

Quiz
33

Controlled Inputs and Re-renders

Quiz
34

Disabling Submit Based on State

Quiz
35

Number Inputs and Type Coercion

Quiz
36

File Inputs Are Uncontrolled

Quiz
37

Uncontrolled Inputs with useRef

Quiz
38

Avoiding null Value Warnings

Quiz
39

Controlled Input Binding Basics

Quiz
40

Resetting Form State After Submit

Quiz
41

Immutable Update of Nested State

Code Quiz
42

Number Input Value Coercion

Code Quiz
43

Form Submit Reloads the Page

Code Quiz
44

Reading an Uncontrolled Input Ref

Code Quiz
45

Controlled Input Won't Update

Code Quiz
46

Validation Never Flags Empty Input

Code Quiz
47

Error Message Renders a Zero

Code Quiz
48

Submit Button Disabled Logic

Code Quiz
49

Controlled-to-Uncontrolled Warning

Code Quiz
50

Reading a Multi-Select Value

Code Quiz
51

Controlled Select Dropdown

Code Quiz
52

Controlled Checkbox Toggle

Code Quiz
53

Form State as an Object

Code Quiz
54

One Handler for Many Inputs

Code Quiz
55

Controlled Textarea

Code Quiz
56

Controlled Text Input Basics

Code Quiz
57

Reading the Event Value

Code Quiz
58

File Inputs Must Be Uncontrolled

Flashcard
59

Never Pass Undefined as Value

Flashcard
60

Debouncing Controlled Input Updates

Flashcard
61

Preventing Cursor Jump in Inputs

Flashcard
62

Number Inputs and Type Coercion

Flashcard
63

Form Submission and preventDefault

Flashcard
64

Controlled Multi-Select

Flashcard
65

Disabling the Submit Button

Flashcard
66

Controlled Input Fundamentals

Flashcard
67

Multiple Inputs, One State Object

Flashcard
68

Controlled Textarea

Flashcard
69

Basic Validation and Error State

Flashcard
70

Controlled Select Elements

Flashcard
71

Dynamic Handler via name Attribute

Flashcard
72

Controlled Checkbox

Flashcard
73

Controlled Radio Buttons

Flashcard
74

Reading event.target.value

Flashcard
Code QuizIntermediate

Number Input Value Coercion

Find why adding to a number input value produces a wrong result.

Codejavascript
function AgeForm() {
  const [age, setAge] = useState(0);

  return (
    <div>
      <input
        type="number"
        value={age}
        onChange={(e) => setAge(e.target.value)}
      />
      <p>Next year you'll be {age + 1}</p>
    </div>
  );
}

Typing 20 shows 'Next year you'll be 201'. What is the bug?