Building Enterprise JavaScript Applications

Controlled form elements

You now have some experience working with props, state and refs. However, there are several major flaws with our current implementation:

• We are holding states in multiple places. This is hard to manage because we have to remember where each state is stored.
• We are duplicating the same states in multiple places. We are holding the valid state in both the RegistrationForm element as well as the Input elements. The RegistrationForm's valid state can be derived from the states of the Input elements.

To prevent both of these flaws, we should lift the state store to the closest common ancestor of the components that need it; for us, this will be the RegistrationForm component.

Here's how it would work. First, we turn ...