Full-Stack React Projects

Option to check out

The user will see the option to perform the checkout depending on whether they are signed in and whether the checkout has already been opened.

mern-marketplace/client/cart/CartItems.js:

{!this.props.checkout && (auth.isAuthenticated() ?     <Button onClick={this.openCheckout}>        Checkout    </Button> :     <Link to="/signin">        <Button>Sign in to checkout</Button>    </Link>)}

When the checkout button is clicked, the openCheckout method will use the setCheckout method passed as a prop to set the checkout value to true in the Cart component:

openCheckout = () => {    this.props.setCheckout(true)}

Once the checkout value is set to true in the Cart view, the Checkout component will be rendered to allow the user to enter the checkout details ...