10. Functional Programming with JavaScript

Activity 15: onCheckout Callback Prop

Solution

1. Change the current directory to Lesson10 and run npm install if you haven't done so in this directory before. npm install downloads the dependencies that are required in order to run this activity (React and Parcel).
2. Run parcel serve activity-on-checkout-prop-start.html and then execute npm run Activity15. You will see the application starting up, as follows:

   Figure 10.42: Output after running the start html script

3. Go to http://localhost:1234 (or whichever URL the start script output). You should see the following HTML page:

   Figure 10.43: Initial application in the browser

4. The onClick of the Proceed to checkout can be implemented as follows:

     render() {
       return (
         <div>
           <p>You have {this.state.items.length} items in your basket</p>
   &...