State & Interactivity

In my POS system, every product card needed an "Add to Cart" button with a quantity selector. Users should be able to click "+" to increase quantity, "-" to decrease it, and see the count update instantly. This sounds simple, but it taught me one of React's most fundamental concepts: state.

A static component that just displays data isn't enough. Real applications need components that respond to user actions—clicks, typing, selections. That's where state comes in.

What Is State?

State is data that changes over time. When a component's state changes, React automatically re-renders it with the new data.

In the POS system:

The quantity in a cart item is state (it changes when users click +/-)
The product name is not state (it doesn't change)
Whether a modal is open is state (it toggles on/off)
The product price is not state (it's fixed data from the API)

The rule: If it changes in response to user interaction or time, it's state.

Your First State: A Counter

Let's build the quantity selector from the POS system—a simple counter with +/- buttons.

Without State (Broken Version)

First, let's see what doesn't work:

// QuantityCounter.tsx
import React from 'react';

function QuantityCounter() {
  let quantity = 0; // ❌ This won't work!
  
  const increment = () => {
    quantity = quantity + 1;
    console.log(quantity); // This will log the value
  };
  
  const decrement = () => {
    quantity = quantity - 1;
    console.log(quantity);
  };
  
  return (
    <div className="quantity-counter">
      <button onClick={decrement}>-</button>
      <span>{quantity}</span>
      <button onClick={increment}>+</button>
    </div>
  );
}

export default QuantityCounter;

What happens?

You click the buttons
The console shows the numbers changing
But the UI shows "0" forever

Why? React doesn't know quantity changed. Regular variables don't trigger re-renders.

With State (Working Version)

// QuantityCounter.tsx
import React, { useState } from 'react';

function QuantityCounter() {
  const [quantity, setQuantity] = useState(0); // ✅ This works!
  
  const increment = () => {
    setQuantity(quantity + 1);
  };
  
  const decrement = () => {
    setQuantity(quantity - 1);
  };
  
  return (
    <div className="quantity-counter">
      <button onClick={decrement}>-</button>
      <span>{quantity}</span>
      <button onClick={increment}>+</button>
    </div>
  );
}

export default QuantityCounter;

Now it works! Click +, the number increases. Click -, it decreases.

Understanding useState

const [quantity, setQuantity] = useState(0);

Let's break this down:

useState is a React Hook (we'll explain Hooks more later)
0 is the initial value of the state
quantity is the current state value
setQuantity is a function to update the state
Array destructuring extracts both values from useState

Every time you call setQuantity(newValue):

React updates the state to newValue
React re-renders the component
The component function runs again with the new state value
The UI updates to show the new value

Event Handlers

<button onClick={increment}>+</button>

onClick is an event handler. React supports all standard DOM events:

onClick - User clicks
onChange - Input value changes
onSubmit - Form submitted
onMouseEnter - Mouse hovers
onKeyDown - Key pressed
And many more

Important: Pass the function reference, not a function call:

<button onClick={increment}>+</button>      // ✅ Correct
<button onClick={increment()}>+</button>    // ❌ Calls immediately
<button onClick={() => increment()}>+</button> // ✅ Also correct (arrow function)

Real Example: Add to Cart Button

In the POS system, each product card has an "Add to Cart" button. Let's build a more realistic version:

// AddToCartButton.tsx
import React, { useState } from 'react';

interface AddToCartButtonProps {
  productName: string;
  maxStock: number;
}

function AddToCartButton({ productName, maxStock }: AddToCartButtonProps) {
  const [quantity, setQuantity] = useState(0);
  
  const increment = () => {
    if (quantity < maxStock) {
      setQuantity(quantity + 1);
    }
  };
  
  const decrement = () => {
    if (quantity > 0) {
      setQuantity(quantity - 1);
    }
  };
  
  const addToCart = () => {
    if (quantity > 0) {
      console.log(`Added ${quantity}x ${productName} to cart`);
      // In real app: dispatch to cart context/state
      setQuantity(0); // Reset after adding
    }
  };
  
  return (
    <div className="add-to-cart">
      <div className="quantity-selector">
        <button 
          onClick={decrement} 
          disabled={quantity === 0}
          className="btn-quantity"
        >
          -
        </button>
        
        <span className="quantity-display">{quantity}</span>
        
        <button 
          onClick={increment} 
          disabled={quantity === maxStock}
          className="btn-quantity"
        >
          +
        </button>
      </div>
      
      <button 
        onClick={addToCart} 
        disabled={quantity === 0}
        className="btn-add-to-cart"
      >
        Add to Cart
      </button>
    </div>
  );
}

export default AddToCartButton;

New concepts here:

Conditional logic in handlers: Check quantity < maxStock before incrementing
Disabled buttons: disabled={quantity === 0} prevents clicks when invalid
Props for configuration: maxStock comes from the product's available inventory
State reset: After adding to cart, reset quantity to 0

Multiple State Variables

Components can have multiple pieces of state. Here's a product card with quantity and a "favorited" toggle:

// ProductCard.tsx
import React, { useState } from 'react';

interface Product {
  id: string;
  name: string;
  price: number;
  stock: number;
  imageUrl?: string;
}

interface ProductCardProps {
  product: Product;
}

function ProductCard({ product }: ProductCardProps) {
  const [quantity, setQuantity] = useState(0);
  const [isFavorited, setIsFavorited] = useState(false);
  
  const toggleFavorite = () => {
    setIsFavorited(!isFavorited);
  };
  
  const increment = () => {
    if (quantity < product.stock) {
      setQuantity(quantity + 1);
    }
  };
  
  const decrement = () => {
    if (quantity > 0) {
      setQuantity(quantity - 1);
    }
  };
  
  return (
    <div className="product-card">
      <button 
        onClick={toggleFavorite} 
        className="favorite-btn"
      >
        {isFavorited ? '❤️' : '🤍'}
      </button>
      
      {product.imageUrl && (
        <img src={product.imageUrl} alt={product.name} />
      )}
      
      <h3>{product.name}</h3>
      <p className="price">{product.price.toLocaleString()} MMK</p>
      <p className="stock">Available: {product.stock}</p>
      
      <div className="quantity-selector">
        <button onClick={decrement} disabled={quantity === 0}>-</button>
        <span>{quantity}</span>
        <button onClick={increment} disabled={quantity === product.stock}>+</button>
      </div>
      
      <button 
        disabled={quantity === 0}
        className="add-to-cart-btn"
      >
        Add {quantity > 0 && `${quantity}x`} to Cart
      </button>
    </div>
  );
}

export default ProductCard;

Each state variable is independent:

Changing quantity doesn't affect isFavorited
Each has its own setter function
Both cause re-renders when changed

State with Objects

Sometimes state is more complex than a single number. In the POS system, I tracked cart items as objects:

// CartItem.tsx
import React, { useState } from 'react';

interface CartItem {
  productId: string;
  productName: string;
  quantity: number;
  price: number;
}

function CartItemDisplay() {
  const [item, setItem] = useState<CartItem>({
    productId: 'prod-1',
    productName: 'Mohinga',
    quantity: 1,
    price: 3500
  });
  
  const incrementQuantity = () => {
    setItem({
      ...item,                    // ← Spread existing properties
      quantity: item.quantity + 1 // ← Override just quantity
    });
  };
  
  const decrementQuantity = () => {
    setItem({
      ...item,
      quantity: item.quantity - 1
    });
  };
  
  const total = item.quantity * item.price;
  
  return (
    <div className="cart-item">
      <h4>{item.productName}</h4>
      <p>Price: {item.price} MMK</p>
      
      <div className="quantity-controls">
        <button onClick={decrementQuantity} disabled={item.quantity === 1}>
          -
        </button>
        <span>{item.quantity}</span>
        <button onClick={incrementQuantity}>+</button>
      </div>
      
      <p className="total">Total: {total.toLocaleString()} MMK</p>
    </div>
  );
}

export default CartItemDisplay;

Critical: When updating object state, always create a new object:

// ❌ Wrong - Mutates existing state
item.quantity = item.quantity + 1;
setItem(item);

// ✅ Correct - Creates new object
setItem({
  ...item,
  quantity: item.quantity + 1
});

The spread operator ...item copies all existing properties, then we override specific ones.

Functional State Updates

There's a gotcha with state updates. When the new state depends on the old state, use the functional form:

// ❌ Can cause bugs in certain scenarios
const increment = () => {
  setQuantity(quantity + 1);
};

// ✅ Always safe
const increment = () => {
  setQuantity(prevQuantity => prevQuantity + 1);
};

Why? State updates can be batched. If you click the button rapidly, the first version might miss some clicks. The functional form guarantees you're working with the most recent value.

Real example from the POS:

const addMultipleItems = () => {
  // If user clicks "Add 5 items" button
  setQuantity(prev => prev + 1);
  setQuantity(prev => prev + 1);
  setQuantity(prev => prev + 1);
  setQuantity(prev => prev + 1);
  setQuantity(prev => prev + 1);
  // ✅ All updates apply correctly
};

Event Object and Parameters

Sometimes you need information from the event:

// Input field tracking what user types
function ProductSearch() {
  const [searchTerm, setSearchTerm] = useState('');
  
  const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
    setSearchTerm(event.target.value);
  };
  
  return (
    <div>
      <input 
        type="text" 
        value={searchTerm}
        onChange={handleSearch}
        placeholder="Search products..."
      />
      <p>Searching for: {searchTerm}</p>
    </div>
  );
}

Or with inline arrow function:

<input 
  type="text" 
  value={searchTerm}
  onChange={(e) => setSearchTerm(e.target.value)}
  placeholder="Search products..."
/>

Both work. The inline version is more concise for simple updates.

Complete Example: POS Product Card with All Features

Here's a production-ready product card from the POS system combining everything we've learned:

// ProductCard.tsx
import React, { useState } from 'react';
import styles from './ProductCard.module.css';

interface Product {
  id: string;
  name: string;
  price: number;
  stock: number;
  category: string;
  imageUrl?: string;
}

interface ProductCardProps {
  product: Product;
  onAddToCart: (productId: string, quantity: number) => void;
}

function ProductCard({ product, onAddToCart }: ProductCardProps) {
  const [quantity, setQuantity] = useState(0);
  const [isAdding, setIsAdding] = useState(false);
  
  const increment = () => {
    setQuantity(prev => Math.min(prev + 1, product.stock));
  };
  
  const decrement = () => {
    setQuantity(prev => Math.max(prev - 1, 0));
  };
  
  const handleAddToCart = () => {
    if (quantity > 0) {
      setIsAdding(true);
      onAddToCart(product.id, quantity);
      
      // Simulate API call delay
      setTimeout(() => {
        setIsAdding(false);
        setQuantity(0);
      }, 500);
    }
  };
  
  const isOutOfStock = product.stock === 0;
  const isLowStock = product.stock > 0 && product.stock < 5;
  const total = quantity * product.price;
  
  return (
    <div className={`${styles.card} ${isOutOfStock ? styles.outOfStock : ''}`}>
      {product.imageUrl && (
        <img src={product.imageUrl} alt={product.name} className={styles.image} />
      )}
      
      <div className={styles.content}>
        <h3>{product.name}</h3>
        <p className={styles.price}>{product.price.toLocaleString()} MMK</p>
        <span className={styles.category}>{product.category}</span>
        
        {isOutOfStock && (
          <p className={styles.outOfStockText}>Out of Stock</p>
        )}
        
        {isLowStock && (
          <p className={styles.lowStockWarning}>⚠️ Only {product.stock} left!</p>
        )}
        
        {!isOutOfStock && (
          <div className={styles.actions}>
            <div className={styles.quantitySelector}>
              <button 
                onClick={decrement} 
                disabled={quantity === 0}
                className={styles.btnQuantity}
              >
                -
              </button>
              
              <span className={styles.quantity}>{quantity}</span>
              
              <button 
                onClick={increment} 
                disabled={quantity === product.stock}
                className={styles.btnQuantity}
              >
                +
              </button>
            </div>
            
            {quantity > 0 && (
              <p className={styles.subtotal}>
                Subtotal: {total.toLocaleString()} MMK
              </p>
            )}
            
            <button 
              onClick={handleAddToCart}
              disabled={quantity === 0 || isAdding}
              className={styles.btnAddToCart}
            >
              {isAdding ? 'Adding...' : `Add to Cart ${quantity > 0 ? `(${quantity})` : ''}`}
            </button>
          </div>
        )}
      </div>
    </div>
  );
}

export default ProductCard;

Advanced patterns used:

Calculated values: total, isOutOfStock, isLowStock are derived from state/props
Conditional rendering: Different UI based on stock status
Disabled states: Buttons disabled when appropriate
Loading state: isAdding shows feedback during async operations
Math.min/Math.max: Cleaner boundary checking
Functional updates: setQuantity(prev => ...) for reliability
Callbacks to parent: onAddToCart will be explained in Component Communication article

Key Learnings

✅ State vs Props

Props: Data passed from parent (read-only in child)
State: Data managed by the component (can change)

✅ useState Pattern

const [value, setValue] = useState(initialValue);

Returns current value and setter function
Calling setter triggers re-render
Always use the setter, never mutate directly

✅ Event Handlers

Pass function reference: onClick={handleClick}
Or inline arrow: onClick={() => handleClick()}
Access event object when needed: onChange={(e) => ...}

✅ State Updates

For simple values: setValue(newValue)
For dependent updates: setValue(prev => prev + 1)
For objects: setValue({ ...value, property: newValue })

✅ Multiple State Variables

Each component can have multiple useState calls
Each is independent
Name them descriptively

Common Mistakes I Made

❌ Mutating state directly

quantity = quantity + 1; // ❌ Won't trigger re-render
setQuantity(quantity + 1); // ✅ Correct

❌ Calling function instead of passing reference

<button onClick={increment()}>+</button> // ❌ Calls immediately
<button onClick={increment}>+</button>   // ✅ Correct

❌ Mutating object state

item.quantity = item.quantity + 1;
setItem(item); // ❌ Same object reference, React might not update

setItem({ ...item, quantity: item.quantity + 1 }); // ✅ New object

❌ Using state immediately after setting

setQuantity(5);
console.log(quantity); // ❌ Still shows old value (state updates are asynchronous)

Next Steps

We can now build interactive components with state, but we're still hardcoding data. In the real POS system, I had arrays of products from the inventory database.

Next, we'll learn how to render lists of data dynamically, building a product catalog that displays hundreds of items from an array.

Continue to: Lists & Dynamic Rendering

PreviousReact Fundamentals & Your First Component NextEffects & Data Fetching

Last updated 29 days ago

hashtagWhat Is State?

hashtagYour First State: A Counter

hashtagWithout State (Broken Version)

hashtagWith State (Working Version)

hashtagUnderstanding useState

hashtagEvent Handlers

hashtagReal Example: Add to Cart Button

hashtagMultiple State Variables

hashtagState with Objects

hashtagFunctional State Updates

hashtagEvent Object and Parameters

hashtagComplete Example: POS Product Card with All Features

hashtagKey Learnings

hashtag✅ State vs Props

hashtag✅ useState Pattern

hashtag✅ Event Handlers

hashtag✅ State Updates

hashtag✅ Multiple State Variables

hashtagCommon Mistakes I Made

hashtagNext Steps