In the last section we had a discussion about the different ways in which we could decide what component
to show on the screen to the user.
In the end we decided to make use of component level States.
So really we can envision the flow as being something like this.
Maybe you will have some piece of component level seat and side of the survey new component called Shoreview.
Now that's equal to true.
That means yes I want to show the review screen and so we should show this component.
Otherwise we'll show the survey form.
So with that in mind let's get to it.
We'll start off by creating the survey form of view inside my code editor.
I'm going to find my survey's directory and make a new file inside they're called survey form review.
J.S..
Now I really expect this to be definitely a presentational type component.
I don't think that this has is going to have a lot of special functionality inside of the survey form
review component so I'm going to just guess that this is going to be a functional component so I'm going
to import re-act from react at the top.
I'll make my survey review components and then for right now I think I'll make a div that contains and
age five with a text of maybe Please confirm your entries and trees.
There we go.
And then we'll export that at the very bottom.
OK so this is definitely enough to get started.
We will leave this component like so until we have a good ability to kind of advance over and view this
one.
And then once once we have that we'll come back and start fleshing this thing out.
Now one other thing I want to remind you about is that that component that we are just looking at that
functional component really should have the ability to see where is our diagram.
Here it is.
So on that search survey form of view there really should be a back button that allows the user to go
back over to the form if they want to make some change.
So I expect to be able to navigate around not only from the survey form but also from this survey form
of view as well.
Both of them.
So now we've got some scaffolding put together.
Let's open up our survey new We're going to import the survey form review and then start thinking about
how we can toggle visibility between the two by using component level States.
So we'll do our imports survey form review from survey form review.
Okay that looks good.
Now at present we're showing the survey form 100 percent of the time we're going to fix that up and
just a little bit.
First let's make a piece of state of component level state for the survey new component.
Now this is going to be going to be the first time inside of this course that we've made use of component
level States.
If you're here again I'm kind of assuming you've got at least a little bit of a background in re-act
now with re-act the classic way of initialising your component level States is by adding on the constructor
function calling super with props and then assigning your state objects.
So maybe like you know new is true or whatever property we want to do.
So this is kind of a very classical way with the Create re-act application or the Create react up project
that we're making use of it has a nice little babbel plug in that allows us to initialize our state
in a slightly different fashion.
So rather than writing out the constructor with all these kind of long form stuff we're going to condense
this state initialization to be a lot less code than what we're seeing right here.
So rather than writing out the constructor and all the stuff we're going to do this slightly differently
we're going to say state equals and then whatever we want our state to be.
So for us maybe something like form view of falls will put a semi-colon afterwards and then I'm going
to clean up the constructor.
And before I delete that I want to be 100 percent clear these two snippets of code right here are 100
percent equivalent 100 percent.
This little state equals something something line is just a little shortcut that still creates an initialises
or state inside the constructor.
So 100 percent equivalent.
OK so clean up the constructor.
And now we're just left with our state initialization.
So we've now got this former view which starts out as false and you know I think that maybe rather than
show just form of view maybe we should give it a little bit more clear name like Shoreview.
So let's change the name a little bit let's say show review.
It could also be a show review form or show form of view.
You know anything in this realm totally appropriate.
I kind of like show former view because it matches the name of the form view component.
So I'm going to stick with show form view now of course we don't want to start off by showing that component.
So we're going to set that initial state to be false to say no don't show it.
I don't want to show it by default.
I want to show the survey form Zumba we've got this we can very easily add in a little helper method
here.
Again I'm going to call it render content just like we did back then and had her inside of here.
I'm going to look to see if this dot state DOT show form review is equal to true.
Now of course this equals equals Eagles is true is a little bit superfluous or not really required inside
of his statement because hey it's either going to be true or false already.
So we don't really need to be comparing it to true.
We can just kind of put it in like so.
So if we should be showing the form of view fantastic.
Let's return the survey form review component.
Otherwise we return the survey form like so.
Now you'll notice that I did not really use an else statement here.
Yes I certainly could have if I wanted to.
In general I like taking this type of approach where in a function I will have an early return and then
if this is like my single catch all that's totally fine I will not put on the else statement and I will
have this you know just other return totally equivalent to having the separate else just in this case
I don't have to write on else as well.
So it's really up to you the personal preference.
So now we've got our rendered content function put together.
I'm going to remove survey form from the render method and instead referred to destock render content
OK.
So at this point if we refreshed this inside the browser I would expect to always be looking at the
survey form no matter what.
So we don't really have any ability to make a change to the state show form of view piece of state just
yet.
So I think that again we're going to make use of a little callback function that we're going to pass
to the survey form and survey form review and his callback function will be responsible for either flipping
this to true or flipping it to false.
So inside of survey form I'm going to add on a callback of on survey submit.
And then the callback will be this dot set state and I get a new line this to give myself a little bit
space start said state and we're going to update show form review to true
like so
it's now inside of survey form whenever a user attempts to submit the form we will run this callback
right here which will update our state inside of Servais new and cause the survey form a view to be
shown instead.
So let's flip over to the survey form and we'll make sure that this callback right here is executed
after the form is successfully submitted.
So back inside of survey form I'm going to find our function that is executed whenever the user successfully
submits the form.
And so remember that is placed right now inside the render method inside the form tag.
We're passing that arrow function to this start Propst on handle submit.
So we had that counsel log in here previously you know we've rented a couple of times and we verified
that the consul log is only executed if the form is valid.
So this would be a fantastic location to add that callback and make sure that the user gets advanced
on to the next page of review.
So inside of the Aero function and I don't need the values object anymore.
So going to clean up the values argument and I'm going to delete the console log like so and I'll add
on this doc prop's dot on surveys submit like so and make sure you get the parentheses afterwards.
Now two things I want to mention here.
The first one is yes we did remove the values.
So we're not really taking the values and passing them onto the form at all at this point.
Or the review form.
We'll talk a little bit about exactly how we're going to access the values.
But remember that's part of the job of redux form inside of our app.
It's part of the job of what redux form is doing for us and why we're actually using it.
Now the second thing I want to say notice that we are passing an arrow function to handle submit right
here.
And the only thing that the body of the arrow function does is call another function.
So the arrow folks right now doesn't really have a good point like it does when we have a good purpose.
So rather than putting the arrow function in here I'm going to clean it up so I can delete their function
on the end of on surveys submit.
I'm also going to clean up the parentheses like so I'm going to make sure I still have a print to see
to close off handles submit.
So at this point we should have handled submit and we're passing it to function on surveys Samit and
we are not invoking on surveys submit so we do not have a set of parentheses after it.
Remember if we passed a set or if we placed a set of parentheses right here that callback function would
be called the instant that our javascript interpreter evaluated this line of code right here.
And we don't want that to happen.
We want to only call this function after the user has submitted or attempt to dismiss the form.
And so that's why we are not placing the parentheses at the very anti-rights because we don't want to
call this thing instantly the second it's rendered.
We want to wait to call it until whenever the user actually attempts to submit the form.
OK.
So I think we're ready to test this out.
I mean save this file I'm going to flip that flip back over to my application.
Now when I do so I will first try just forcibly advancing over the review screen when I click on next.
I get all the validation errors.
OK so that's good.
That means we can't advance without having a valid form here.
So if I put in my values now the form is valid if I click next I advance on to the other form component.
So please confirm your entries and then in theory we're going to show all the different form inputs
on here as well.
So looks like this is working pretty well.
Early stage 1 we still have to kind of flesh out the survey form review and make sure that a user can
easily kind of go back and make changes to the form as well.
So we'll take care of that in the next section.
We'll also make sure that a user can actually see the values on this component as well and somehow review
them and decide whether or not they need to make changes.
So let's tackle both those tasks in the next section.