React Shopping Cart Tutorial and Code
Tags: react, shoppingcart, tutorial, retail
Published: 2019-02-26 19:16:47

---
title: React Shopping Cart Tutorial and Code
published: true
description: A description on how I made a custom-tailored shopping cart and the code for you to use in your projects.
tags: #React #shoppingcart #tutorial #retail
---
Edited to add demo of cart working upon request.
<div><h3 class="toggleHeader">How I built a functional shopping cart:</h3><div class="tutorial"><p>TLDR: A react shopping cart! Code is on <a href="https://github.com/andersjr1984/ReactShoppingCart/releases/latest" rel="noopener noreferrer" target="_blank">github here.</a><br><br><a href="https://andersjr1984.github.io/portfolio/">Shameless plug for my digital portfolio.</a><br><br><a href="https://green-owl-photography.firebaseapp.com/">See cart in action (site under construction).</a><br><br>I know there are probably some easier ways to do things, but I couldn't find a shopping cart that just worked, so I decided to build my own.  I am still really new to using React and programming in general, so any input or suggestions is greatly appreciated. This little project taught me a lot about callback functions, which are fun!</p><ol><li>My app calls the shopping cart with a list of items the user has chosen, via an "Add to Cart" button with event handler.</li><br><img src="https://andersjr1984.github.io/portfolio/static/media/callingShoppingCart.5987d6b6.png" alt="Call Shopping Cart"><li>I started with a stateless component which has a sole purpose to show my stateful components.</li><br><img src="https://andersjr1984.github.io/portfolio/static/media/statelessShoppingCart.ec1a344b.png" alt="Shopping Cart"><li>To display each item, ProductDisplay took in the list of items, then mapped them on another "Display" Component.</li><br><img src="https://andersjr1984.github.io/portfolio/static/media/mappingItems.db596456.png" alt="Mapping Items"><li>ProductDisplay has a state component that created a product list with default size, type, and quantity once mounted.  This list will later be sent to checkout.</li><br><img src="https://andersjr1984.github.io/portfolio/static/media/productArray.56f96fa6.png" alt="Product Array"><li>The Display component shows each image and gives you the opportunity to change the type of print, size of print, and quantity to order.</li><br><img src="https://andersjr1984.github.io/portfolio/static/media/display.41bad965.png" alt="Display Component"><li>I created a size array and a type array to capture all the size and type options.</li><br><img src="https://andersjr1984.github.io/portfolio/static/media/sizeAndTypeOptions.6294cd3b.png" alt="Size and Type Options"><li>We will retrace to the callback functions in a moment, but I want to quickly show the selectors change event handler. Type selector just renders the type by iterating through the Type Array.</li><br><img src="https://andersjr1984.github.io/portfolio/static/media/typeSelectorEvent.c99c8187.png" alt="Type Selector Event Handler"><li>Do the above steps for any other options that require user input, such as size and options!</li><li>As you can see, this initiates the props.callback function, which sends the child's state data to the parent. Here is the parent, the Display component, callback function.</li><br><img src="https://andersjr1984.github.io/portfolio/static/media/displayCallback.e82fef5a.png" alt="Display receives the new type!"><li>Another callback function, this time to ProductDisplay.  Here is ProductDisplay's callback which updates the array that was created in step 4.</li><br><img src="https://andersjr1984.github.io/portfolio/static/media/productDisplayCallback.a57889d9.png" alt="Product display updates the array!"></ol><p>There you have it, if you do the above, you'll have a shopping cart.  Feel free to steal my code and improve upon it.  I'd also love to hear how you think it can be improved.</p></div>