Some Solutions, Some New Problems

I solved yesterday's problem with a little restructuring.  My goal flow was:

1. User fills in form
2. User is shown a preview
3. User saves preview (and changes are committed to the JSON deck)

I was trying to have the form and the preview be different routes tied to App, but kept getting the error that I was trying to change Router routes.  It occurred to me that I didn't need to go to a new page using Router - I could create different components for the form and the preview, and store them inside a single page.  My new flow:

Parent: App
Child of App: DesignContainer (stateful)

Child of DesignContainer: DesignForm
Child of DesignContainer: VerifyPage

Since Design Container is where I am now storing all of my form's input values, it can tell when a full form has been submitted - then it hits a conditional that renders VerifyPage instead of DesignForm.

So sure, the browser won't be displaying new paths for the DesignForm and VerifyPage, but at least a user will be sent where they're supposed to be!

This raises an interesting issue regarding my NameContainer, which is currently storing all form values within itself, and sending a completed name up to App.  The reason I had structured it this way was so that I could later send all the name to the NavBar via the Router tag's attributes.  I'll have to check whether I run into the same problem, and find a solution.

While working on today's challenge, I noticed that my "Load Full Deck" function within App doesn't seem to be triggering at all. There are three possible issues (that I can think of now):

1. I tried putting the fetch inside of a ComponentDidMount(), but it still wasn't being triggered. Could this be because App is holding Routes but not actually mounting anything itself?

2. There is an error inside of my fetch.

3. I can't store the fetch inside of a function, then call that function inside of ComponentDidMount().