instructions.md

9/ Controlled Forms

Action	Files	Exports
Modify	src/modules/checkout/checkout.component.js	{Checkout}
Modify	src/modules/checkout/components/review.component.js	{Review}
Modify	src/modules/checkout/components/addressForm.component.js	{AddressForm}
Modify	src/modules/checkout/components/paymentForm.component.js	{PaymentForm}

TL;DR

Let's create the controlled forms !

The Stepper gives a nice UX for combined forms however, outside Material-UI code sample, we need to control every inputs and store their values in order to display it in the Review component. Where would you locate the state then, in the forms' parent Checkout ? What other options do you have ? How would you reduce the re-renders ?

Step by step

src/modules/checkout/checkout.component.js

src/modules/checkout/components/review.component.js

src/modules/checkout/components/addressForm.component.js

src/modules/checkout/components/paymentForm.component.js