From the course: React: Design Patterns

Unlock this course with a free trial

Join today to access over 25,500 courses taught by industry experts.

Controlled forms

Controlled forms

- [Instructor] Alright, so now that we've seen what an uncontrolled form looks like, let's take a look at what the controlled version of this is going to look like. Now, again, the big problem with the uncontrolled form is there's not much the parent component can do to change either its behavior or the values that it's originally populated with, which is one of the nice parts about a controlled form. So here's what this controlled form is going to look like. First of all, we're going to create a new component. Make sure it is in the controlled-uncontrolled directory there. All right, I don't know why mine was open elsewhere, but let's create a new file and this is going to be called ControlledForm.jsx. We'll start off with the UncontrolledForm just to kind of save ourselves a little bit of typing there, and what we're going to do here is, instead of having each of these just be a simple ref that allows us to access the value once we're done, what we can do is we're actually going to…

Contents