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 ...

Get Full-Stack React Projects now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.