Now that the user can click on the next button to advance over to the form of a component you want to
make sure that the actual form values are actually visible on here as well.
In addition the user should also click some type of Cancel button down here to go back to the previous
screen as well.
I think that maybe the GO BACK button would be a good place to start.
So remember whenever a user clicks on some like go back or cancel you know something that just indicates
hey I want to fix some entry in here.
We want to make sure that we somehow flip the value of show form of view inside of the survey new component.
Back over to false because that's going to mean that we're going to show the survey form once more where
the user can actually make changes if they so choose.
So I bet you can imagine how we'll take care of this whenever a user clicks on that button inside of
sort of a form of view.
We have to somehow change the state inside of survey new which means we're going to be passing down
a callback function just like we did for the survey form as well.
So inside of render content I'll find the survey form review component and then we're going to pass
it a callback.
I think that will name this properly.
Or maybe something like on cancell.
So if a user ever clicks on the button maybe we'll call it cancel or we'll call it back.
You know something like that will then run the Aero function that will flip our state of show form review
back over to false like so
now it's our job to make sure that we open up the survey form review components and wire up this prop
to some button.
So I going to find my survey form review component here it is right here just to stick with our convention
I'm going to put a comment at the top sort of a form review shows user users their form inputs for review
now inside of the functional components underneath our age 5.
I'm going to put down a button and I'm going to probably give it a couple of different components or
a couple different props Excuse me some are going to open up the tag like so and then inside of here
I'm going to start off putting some class names.
So we'll do a class name of yellow.
That's going to make the thing obviously appear yellow.
We're going to darken three it which is going to darken the color and that will also add on between
Dasch flat as well.
And then whenever a user clicks this thing so on click we're going to want to run the function on cancell
which should be passed in as a prop to the survey review component.
And you I just realized I'm calling this survey review right here.
This really should be survey form review.
If he got confused by that I apologize.
All these survey name components.
So it doesn't really make a difference what we call this component right in here we can call it a SDF
for all we care we just need to make sure it lines up with the expert default statement at the bottom
as well.
OK.
So now we've got our on click function.
We need to make sure that we accept the prop that is being passed in from the survey form.
So rather than receive the entire Propp subject I'm going to structure out of it and I'm going to take
the prop on cancell And then when every user clicks on our cancel or go back button we'll run the function
on cancell.
Finally we need to make sure the button has some actual text.
So let's give it you know really this could be something like cancel.
It could also be back one of the other either is totally appropriate.
I think that probably I'll go with back you know just to make sure that it's really clear to the user
what's going on.
One of the thing I has realized I made a small typo here as well I've got a closing brace right here
that should be open because we're closing it with the button right here.
OK.
So couple of typos there.
I apologize for the typos.
You'd be surprised at how tough it is sometimes to talk and type at the same time.
But that's the reality of life.
OK.
So we've got our button.
We've got the class name.
We've got the callback.
We got the text inside of it.
I think we're ready for some tests and I flip back over to the browser.
I'm still at the form right now.
Remember if you submit the form and you're curious how to get back.
You could always just refresh the page and you'll be kicked back to surveys new which by default is
going to show you the form.
So now inside of here.
Put in some Demy inputs click next.
We get.
Please confirm your entries and we can click back if we want to.
However when we click back you'll notice that the entire form to somehow magically clears out.
So it looks like there might be a little bit more than meets the eye here.
As far as getting this form to work correctly.
So when I click back it clears out the form.
In addition I kind of suspect at this point that even when we are here even when we like navigate over
to this component I kind of suspect that the form entries or the form inputs have already been deleted
or already been somehow dumped by redux form which means that I couldn't even show them on this component
right here if I wanted to.
So clearly there still has to be a little bit of work done to figure out exactly how we kind of persist
the values that are entered into the form.
So let's take a quick break and when we come back we'll figure out exactly how we're going to handle
that.