Join Joe Chellman for an in-depth discussion in this video Forms in React: Controlled or not, part of React for Web Designers.
- [Instructor] The next step we'll … be taking is updating our little app's state based on … what happens in our filter form here. … But before we do that let's take a brief pause … to talk about the two main ways … that you can work with forms in React. … Specifically, we're going to be talking … about controlled versus uncontrolled form elements. … What we're asking here is who is the source … of truth for the form data? … It can either be React state … or it can be the DOM elements that comprise the form. … First, we'll talk about controlled components. … A controlled form component is one where React is the source … of truth or more specifically, … React's state is the source of truth. … That means that your code controls … whether the form value changes. … So, for example, you can do validation in your React code … and then not update the state of the element … that you're validating and the value won't change … no matter what the user has typed. … When you're working with controlled components every piece …
Author
Released
6/5/2019- Installing React on an existing site
- Thinking about a design in terms of components
- Creating fully-featured function components using Hooks
- Storing and retrieving data from an external RESTful API
- Employing third-party components for CSS animation
- Using conditional rendering
Skill Level Intermediate
Duration
Views
Related Courses
-
Essentials of CSS for React Developers
with Eric Greene53m 31s Beginner -
React.js Essential Training (2018)
with Eve Porcello1h 25m Intermediate
-
Introduction
-
Using the exercise files1m 2s
-
1. Introducing React
-
2. First Project: Customizer
-
Attaching a data source3m 20s
-
Implement props4m 28s
-
Solution3m 4s
-
3. Second Project: Directory Browser
-
Scaffold initial components5m 58s
-
Functional components6m 37s
-
Build the filters form5m 41s
-
Wire up the filters form10m 57s
-
4. Third Project: Status Updater
-
Using conditional rendering4m 36s
-
Let form post to the API3m 25s
-
Conclusion
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Forms in React: Controlled or not