In the checkout form, we will add text fields to collect the customer name and email.
mern-marketplace/client/cart/Checkout.js:
<TextField id="name" label="Name" value={this.state.checkoutDetails.customer_name} onChange={this.handleCustomerChange('customer_name')}/><TextField id="email" type="email" label="Email" value={this.state.checkoutDetails.customer_email} onChange={this.handleCustomerChange('customer_email')}/><br/>
When the user updates the values, the handleCustomerChange method will update the relevant details in the state:
handleCustomerChange = name => event => { let checkoutDetails = this.state.checkoutDetails checkoutDetails[name] = event.target.value || undefined this.setState({checkoutDetails: checkoutDetails}) ...
