Your Cart
-
-
- -
-
-
-
-
- Total
-
- £0.00
-
-
+ Icons made by
+
+ Icongeek26
+
+ from
+
+ www.flaticon.com
+
+
+
+ )
+}
diff --git a/src/CartItem.tsx b/src/CartItem.tsx
new file mode 100644
index 0000000..b0d349b
--- /dev/null
+++ b/src/CartItem.tsx
@@ -0,0 +1,74 @@
+import { CartItemType } from './App'
+import { CartListProps } from './CartList'
+
+type CartItemProps = {
+ cartItem: CartItemType
+} & CartListProps
+
+export default function CartItem({
+ cartItem,
+ cartItems,
+ setCartItems,
+}: CartItemProps) {
+ const addToCount = () => {
+ setCartItems(
+ cartItems.map((cartItemFromState) => {
+ if (cartItem.id === cartItemFromState.id) {
+ return {
+ ...cartItem,
+ count: cartItem.count + 1,
+ }
+ } else {
+ return cartItemFromState
+ }
+ })
+ )
+ }
+
+ const removeFromCount = () => {
+ if (cartItem.count <= 1) {
+ setCartItems(
+ cartItems.filter(
+ (cartItemFromState) => cartItemFromState.id != cartItem.id
+ )
+ )
+ } else {
+ setCartItems(
+ cartItems.map((cartItemFromState) => {
+ if (cartItem.id === cartItemFromState.id) {
+ return {
+ ...cartItem,
+ count: cartItem.count - 1,
+ }
+ } else {
+ return cartItemFromState
+ }
+ })
+ )
+ }
+ }
+
+ return (
+ 
+ {cartItem.name[0].toUpperCase() + cartItem.name.slice(1)}
+ + {cartItem.count} + +Your Cart
+
+
+ -
+ {cartItems.map((cartItem) => (
+
+
+
+
+ Total
+
+ {`£${calculateTotal()}`}
+
+
+ 
+
+
+
+ Greengrocers
+-
+ {storeItems.map((storeItem) => (
+