Skip to main content

​
Shopping Cart Component

The FirstSteps component demonstrates how to build a shopping cart that manages multiple items, each with its own counter. This example shows how to work with arrays of data and render dynamic lists of components in React.

​
Complete Implementation

import { ItemCounter } from "./shopping-cart/ItemCounter";

interface ItemInCart {
    productName: string;
    quantity: number;
}

const itemsInCart: ItemInCart[] = [
    { productName: 'Nintendo swtich2xdd', quantity: 10 },
    { productName: 'exbos', quantity: 0 },
    { productName: 'diyin light 3 :000', quantity: 2 },
]

export function FirstSteps() {
    return (
        <>
            <h1>Carrito de compras</h1>

            {itemsInCart.map(({ productName, quantity }) => (
                <ItemCounter 
                    key={productName} 
                    name={productName} 
                    quantity={quantity}
                />
            ))}
        </>
    )
}

​
Understanding the Code

​
ItemInCart Interface

The ItemInCart interface defines the structure for each product in the cart: 
interface ItemInCart {
    productName: string;  // The name of the product
    quantity: number;      // Initial quantity in cart
}
Using TypeScript interfaces ensures type safety when working with cart items throughout your application.

​
Cart Data Structure

The shopping cart is initialized with an array of items: 
const itemsInCart: ItemInCart[] = [
    { productName: 'Nintendo swtich2xdd', quantity: 10 },
    { productName: 'exbos', quantity: 0 },
    { productName: 'diyin light 3 :000', quantity: 2 },
]
This array can be:
  • Hardcoded for demo purposes (as shown)
  • Fetched from an API
  • Loaded from local storage
  • Managed by a state management solution

​
Rendering the List

The component uses the map() method to render an ItemCounter for each item: 
{itemsInCart.map(({ productName, quantity }) => (
    <ItemCounter 
        key={productName} 
        name={productName} 
        quantity={quantity}
    />
))}
Key points:
  1. Destructuring: { productName, quantity } extracts properties directly from each item
  2. Key prop: key={productName} helps React efficiently track and update each component
  3. Props passing: Each ItemCounter receives name and quantity as props
The key prop is essential when rendering lists in React. It should be a unique identifier for each item. In production, use a unique ID rather than the product name.

​
Component Structure

FirstSteps (Parent)
├── h1 header
└── Multiple ItemCounter components (Children)
    ├── ItemCounter (Nintendo swtich2xdd)
    ├── ItemCounter (exbos)
    └── ItemCounter (diyin light 3 :000)
Each ItemCounter maintains its own state independently, allowing users to adjust quantities for individual products.
For a more advanced implementation, consider lifting state up to the parent component to calculate totals, handle checkout, or persist cart data.

​
Use Cases

  • E-commerce shopping carts
  • Inventory management systems
  • Order forms with multiple items
  • Product comparison lists
  • Wish lists with quantity tracking

​
Next Steps

  • Learn about the ItemCounter component used in this example
  • Explore state management with React hooks
  • Add features like item removal, total calculation, or persistence

Build docs developers (and LLMs) love

Get started for freeTalk to us