"Shawn, our task today is to build a form wizard, modeling all the steps that the user will take while using the online bookstore."
We will start with a form, where the user selects the book that they want to buy
In the next step, the user will enter the information related to the billing and shipping address
After this, the user needs to choose a delivery mechanism
In the end, the user will confirm the transaction and place the order
"Will we design four different forms then?" asked Shawn.
"Yes. But all of them will be controlled by a single parent. The parent component will keep a track of the state that the user is in and will render a form for this step." explained Mike.
// src/BookStore.js
import React from 'react';
var BookStore = React.createClass({
render() {
switch (step) {
case 1:
return <BookList />;
case 2:
return <ShippingDetails />;
case 3:
return <DeliveryDetails />;
}
}
})...