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 modals

Controlled modals

From the course: React: Design Patterns (2021)

Start my 1-month free trial Buy for my team

Controlled modals

“

- [Instructor] Okay, the next example of uncontrolled and controlled components that we're going to take a look at is modals. Now, in this case, we actually already have an uncontrolled version of a modal component from earlier in the course when we created this modal. Now, this modal is uncontrolled. And the reason we say that is that the modal itself is the one that's controlling whether or not it's shown, and it also controls when it's hidden. And there's a few problems with this setup. The main problem is that none of the other components, right? For example, if we want to display this in our App component, which we can do by importing it here and displaying it here, refresh it there and we can take a look at it, okay? The problem is that the parent component really has no control over what this modal is doing. So let's say that we had another button on our page that we wanted to display the modal, right? Let's say…

Contents