So it's really similar to our sign up or our register form right as in we have this back and create account buttons and this line. Okay, so I made our application at localhost:3000/signup. What we want to do is take this form and basically copy it and paste it into a review form component okay, because you can see a lot of these are the same.

So let's head over to signupForm.js, and let's copy everything and let's go into our order directory and create a new file and call it reviewForm.js and we'll paste that in there. Okay, so I took signupForm.js and pasted it into a new file I just created called reviewForm.js.

Alright, now let's get all these instances of SignupForm okay so all of these things that say SignupForm in this file, in reviewForm, and let's replace them. So I just selected it and hit command + d a bunch of times to select it all and I'm going to replace it with reviewForm. Cool, now what I want to do is use this component inside of our review.js to see if it's rendering. So I'm in review.js now and I'm going to import it underneath PageTitle, we'll import ReviewForm from ./reviewForm.

review.js

import PageTitle from '../pageTitle';
import ReviewForm from './reviewForm';

Okay, now let's go down here and let's say ReviewForm, and let's say className is review__form, and I think that's all we need for the deal here.

Now we need one more thing actually and it's going to be the onSubmit, so let's say onSubmit is equal to an arrow function that takes in fields and we're just going to console.log those fields. Next thing we're going to do is pass that into our ReviewForms and we're gonna say onSubmit is equal to this.onSubmit.

review.js

onSubmit = (fields) => {
    console.log('fields');
}

render() {
    return (
        <div className='review'>
            <PageTitle className='review__page-title' title='Order Review'/>
            <ReviewForm className='review__form' onSubmit={this.onSubmit}/>
        </div>
    )
}

Okay, now let's go ahead and let's head over to Google Chrome and let's see what this looks like, okay let's go to our application, I'm going to hit login, I'm going to go to shop and hit all, I'm going to add one of the products to the cart and I'm going to hit check out.

Okay, so you'll see now that we have all these random fields, but we have Create Account and Back right, we have these buttons we want with the line above it. So we obviously don't want name, email, password, or confirm password, we actually want no inputs. So that makes things really really easy, we don't have to go through change all that css and change all those fields and take forever. It's going to be super easy to do, all we have to do is just get rid of all those for now and then all we need to do is make this subtotal, tax, shipping, and total component right here and then the component in here with Name, Quantity, and price.

So what we need to do is we need to get rid of password requirements, we need to get rid of name, e-mail, password, and confirm password, and then the grid. So let's go into our reviewForm.js and let's start by getting rid of this const info array. You'll notice we already have handleSubmit, so if we submit it will log whatever we put in the onSubmit here in the fields here right. Anyway let's go in here and let's remove the name, email, password, and confirm okay let's remove all these fields.

Okay, now what we want to do is basically look at our application and go from there. So let's go into our application and it looks like we have an error, so I'm gonna hit command + option + j let's see what happened, it says info is not defined.

Okay, now the reason this is happening is because in here we're trying to use this details component and pass info and we deleted the info, so let's delete this details component as well as the import to details, let's also get rid of the form input import, from this import with FormButton in it, let's leave FormButton because we obviously want form buttons so let's leave that.

Okay, let's head over to Chrome and lets see what we've got. Okay cool, it looks really good so far.

We have our Order Review title, we have the line, and we have the two buttons okay. Now let's look at the design and see what it looks like, okay we've got order review, we've got all the products then we have the line and the Back and Proceed to Checkout.

So before we end this video, I want to do one more thing and that's name these buttons and align them on a grid. So let's go into our application and let's rename these as well as the names of these classNames entirely. So you see how it says sign up form? We want to replace this all with review-form, okay we want that line, and we want to change login to what was it? Proceed to Checkout or something, let's check, okay proceed to checkout, I'm going to call it proceed and then the name is going to be proceed as well here. And then the title is obviously going to be Proceed to Checkout, it's going to be of type submit FormButton and that's good.

Let's change the back now or let's see what it looks like, looks like it's still back, so we will leave back. Okay, so we just changed this one to proceed and changed these all to review form. Okay, so this definitely won't be aligned on any grid at this point because we don't even have it aligned to signin and signup form grid, so it's on its own.

Now let's go to Google Chrome, and see what it looks like, and it looks about the same except for our line is now missing. So what I want to do in the next video is I want to align all these components on a grid and then we'll go from there. So let's commit our code.

Terminal

git status
git add .
git commit -m "built review form buttons"

But I'll see you in the next video.

Resources

Source code