From the course: React: Design Patterns (2021)
Unlock the full course today
Join today to access over 24,400 courses taught by industry experts.
Controlled forms
From the course: React: Design Patterns (2021)
Controlled forms
- [Instructor] Okay, so now that we've seen what an uncontrolled form looks like, let's take a look at what a controlled form is going to look like and how it's different. So we're going to start off by creating a new file here, which we'll call ControlledForm.js. And our component is going to look like this. We're going to say export const ControlledForm equals, and then we'll have the body of our component. And the main difference with our controlled form is going to be that we're going to track the values of each of our forms inputs using a useState hook. So what this is going to look like, we're going to start off by importing the useState hook up here, import useState from react. And then inside our ControlledForm component, we're going to create state variables for all of the inputs that we're going to be inserting into our form. So we're going to say const name setName equals useState. And the starting value is going to…