In the Checkout component, we will initialize the checkoutDetails object in state before collecting the details from the form.
mern-marketplace/client/cart/Checkout.js:
state = { checkoutDetails: {customer_name: '', customer_email:'', delivery_address: {street: '', city: '', state: '', zipcode: '', country:''}}, }
After the component mounts, we will prepopulate the customer details based on the current user's details and also add the current cart items to checkoutDetails.
mern-marketplace/client/cart/Checkout.js:
componentDidMount = () => { let user = auth.isAuthenticated().user let checkoutDetails = this.state.checkoutDetails checkoutDetails.products = cart.getCart() checkoutDetails.customer_name = user.name ...