• Take note of /src/root.jsx, /src/context.jsx, and /gatsby-browser.js//gatsby-ssr.js
  • You'll notice that I created global state to store my "domain state"; in this case, the information the user is entering throughout the app. This may not always be the most desirable... you may want this state to be more localized, and there are ways to do that. This is just one method.
• You'll also notice that I used a utility function for updating the state. I was always doing a merge of the state values, so I made a function that would do it one place and passed that down through context. You could also organize the state into logical categories, like:

state = {
  shoppingCart: {
    ...
  }
}

• I consume the global app state inside of ChooseForm, telling the FieldInput components to use the global state values as the default
• I didn't see firstName or lastName filled in anywhere except on the second form, so it appears as though that's where they should be defined. They will wind up being empty values in global state until that step is submitted, but if you were to navigate back to that page later (without a full refresh), they would have kept the values

• I had to add bootstrap as a dependency then add the necessary css to gatsby-browser.js in order to get reactstrap working
• It is not a good idea to store components inside of the pages directory. Things like ChooseForm and index are good, because those are actual routes. Everything else is a component: MyForm, steps, fields... these are not pages, and that is one reason Gatsby is printing a bunch of warnings when you build.
  • I've moved the other modules into places that seemed to make sense, but obviously their placement is up to you
• You don't even necessarily need ChooseForm to be a new route, but perhaps it was your intention for it to be a separate page. Maybe something like a "Checkout" page?