Full-Stack React Projects - Second Edition

Delivery address

To collect the delivery address from the user, we will add fields to collect address details such as the street address, city, state, zip code, and country name to the checkout form. We will use the following code to add the text fields to allow a user to enter these address details.

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

<TextField id="street" label="Street Address" value=          {values.checkoutDetails.delivery_address.street} onChange={handleAddressChange('street')}/><TextField id="city" label="City" value={values.checkoutDetails.delivery_address.city} onChange={handleAddressChange('city')}/><TextField id="state" label="State" value={values.checkoutDetails.delivery_address.state} onChange={handleAddressChange('state')}/>