Controlled Forms in React
About
In this module, we’ll learn how to create and control forms in React using component state. We’ll cover setting up controlled inputs, managing state changes, and handling form submissions without the page refreshing. This module provides practical skills for effectively managing forms in React applications.
Content
| Lesson | Video Time | Video | Skills |
|---|---|---|---|
| Setup | 2 min | link | Setting up the development environment. |
| Concepts | 5 min | link | Describe the clash between virtual DOM and real DOM and why controlled forms are a preferred pattern. |
| Controlled Inputs | 6 min | link | Understanding the relationship between state variables, handler functions, and controlled inputs. |
| Managing Controlled Forms | 7 min | link | Control a form’s state in React. |
| Form State as a Single Object | 8 min | link | Refactor multiple state variables into a single form state object. |
| Handling Form Submission | 5 min | link | Handling form submission events, and their aftermath. |
| Form Validations | 13 min | link | Implement front-end validations on a React form. |
| Total content | 46 min |