What are the advantages?

1. Data (state) and UI (inputs) are always in sync. The state gives the value to the input, and the input asks the Form to change the current value.

2. In-place feedback, like validations

3. Disable the button unless all fields have valid data

4. Enforce a specific input format

How are the errors going to be shown?

How to represent errors?

"false" means no errors or entirely valid; "true" means a field is invalid.

Create a validation function

It will accept the current values of the fields and returns  the errors object.

• Have email: true if email is empty.
• Have password: true if password is empty.

Run the validator in render.

Disable the button.

Ask each step for its data; Always render all the steps, and use CSS to hide the currently invisible steps. And then, use refs to ask each step about its values.

Directions

Change the owner of the form state; The steps will receive the values as props, and call the callbacks when the fields change.

Sample Code

Steps to accept state from each of classes.

For each, it handles onChange 

goToNext function