Props and State

Master React's data flow with props and state management

90 min•By Priygop Team•Last updated: Feb 2026

What are Props?

Props (properties) are a way to pass data from parent to child components. They are read-only and help make components reusable and configurable.

Props Examples

Example

// Passing props to component
function Welcome(props) {
    return <h1>Hello, {props.name}!</h1>;
}

// Using the component
<Welcome name="John" />

// Destructuring props
function Welcome({ name, age, city }) {
    return (
        <div>
            <h1>Hello, {name}!</h1>
            <p>Age: {age}</p>
            <p>City: {city}</p>
        </div>
    );
}

// Using with destructured props
<Welcome name="John" age={25} city="New York" />

// Props with children
function Container({ children }) {
    return <div className="container">{children}</div>;
}

<Container>
    <h1>This is a child</h1>
    <p>This is another child</p>
</Container>

State Management

Example

// Using useState hook (Function Component)
import React, { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0);
    
    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>
                Increment
            </button>
            <button onClick={() => setCount(count - 1)}>
                Decrement
            </button>
        </div>
    );
}

// Class component with state
class Counter extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0
        };
    }
    
    increment = () => {
        this.setState({ count: this.state.count + 1 });
    }
    
    decrement = () => {
        this.setState({ count: this.state.count - 1 });
    }
    
    render() {
        return (
            <div>
                <p>Count: {this.state.count}</p>
                <button onClick={this.increment}>Increment</button>
                <button onClick={this.decrement}>Decrement</button>
            </div>
        );
    }
}

Props vs State

Props are read-only and passed from parent to child
State is mutable and managed within the component
Props trigger re-renders when parent updates them
State triggers re-renders when setState is called
Props are used for configuration and data flow
State is used for component-specific data

Advanced Props Patterns

Example

// Props with default values
function Button({ 
    children, 
    variant = 'primary', 
    size = 'medium',
    disabled = false,
    onClick 
}) {
    const className = `btn btn-${variant} btn-${size}`;
    
    return (
        <button 
            className={className}
            disabled={disabled}
            onClick={onClick}
        >
            {children}
        </button>
    );
}

// Props validation with PropTypes
import PropTypes from 'prop-types';

function UserCard({ user, onEdit, onDelete }) {
    return (
        <div className="user-card">
            <h3>{user.name}</h3>
            <p>{user.email}</p>
            <div className="actions">
                <button onClick={() => onEdit(user.id)}>Edit</button>
                <button onClick={() => onDelete(user.id)}>Delete</button>
            </div>
        </div>
    );
}

UserCard.propTypes = {
    user: PropTypes.shape({
        id: PropTypes.number.isRequired,
        name: PropTypes.string.isRequired,
        email: PropTypes.string.isRequired
    }).isRequired,
    onEdit: PropTypes.func.isRequired,
    onDelete: PropTypes.func.isRequired
};

// Props spreading
function FormField({ label, ...inputProps }) {
    return (
        <div className="form-field">
            <label>{label}</label>
            <input {...inputProps} />
        </div>
    );
}

// Usage
<FormField 
    label="Email"
    type="email"
    placeholder="Enter your email"
    required
/>

Advanced State Management

Example

// Complex state with objects
function UserProfile() {
    const [user, setUser] = useState({
        name: '',
        email: '',
        preferences: {
            theme: 'light',
            notifications: true
        }
    });

    const updateUser = (field, value) => {
        setUser(prev => ({
            ...prev,
            [field]: value
        }));
    };

    const updatePreference = (key, value) => {
        setUser(prev => ({
            ...prev,
            preferences: {
                ...prev.preferences,
                [key]: value
            }
        }));
    };

    return (
        <div>
            <input 
                value={user.name}
                onChange={(e) => updateUser('name', e.target.value)}
                placeholder="Name"
            />
            <input 
                value={user.email}
                onChange={(e) => updateUser('email', e.target.value)}
                placeholder="Email"
            />
            <select 
                value={user.preferences.theme}
                onChange={(e) => updatePreference('theme', e.target.value)}
            >
                <option value="light">Light</option>
                <option value="dark">Dark</option>
            </select>
        </div>
    );
}

// State with arrays
function TodoList() {
    const [todos, setTodos] = useState([]);
    const [newTodo, setNewTodo] = useState('');

    const addTodo = () => {
        if (newTodo.trim()) {
            setTodos(prev => [...prev, {
                id: Date.now(),
                text: newTodo,
                completed: false
            }]);
            setNewTodo('');
        }
    };

    const toggleTodo = (id) => {
        setTodos(prev => prev.map(todo =>
            todo.id === id 
                ? { ...todo, completed: !todo.completed }
                : todo
        ));
    };

    const deleteTodo = (id) => {
        setTodos(prev => prev.filter(todo => todo.id !== id));
    };

    return (
        <div>
            <input 
                value={newTodo}
                onChange={(e) => setNewTodo(e.target.value)}
                placeholder="Add new todo"
            />
            <button onClick={addTodo}>Add</button>
            <ul>
                {todos.map(todo => (
                    <li key={todo.id}>
                        <input 
                            type="checkbox"
                            checked={todo.completed}
                            onChange={() => toggleTodo(todo.id)}
                        />
                        <span style={{
                            textDecoration: todo.completed ? 'line-through' : 'none'
                        }}>
                            {todo.text}
                        </span>
                        <button onClick={() => deleteTodo(todo.id)}>Delete</button>
                    </li>
                ))}
            </ul>
        </div>
    );
}

Practice Exercise: State Management

Example

// Exercise: Build a Shopping Cart
// Create a shopping cart with state management

// src/components/ShoppingCart.js
import React, { useState } from 'react';

function ShoppingCart() {
    const [cart, setCart] = useState([]);
    const [products] = useState([
        { id: 1, name: 'Laptop', price: 999, stock: 5 },
        { id: 2, name: 'Mouse', price: 25, stock: 10 },
        { id: 3, name: 'Keyboard', price: 75, stock: 8 }
    ]);

    const addToCart = (product) => {
        setCart(prev => {
            const existingItem = prev.find(item => item.id === product.id);
            if (existingItem) {
                return prev.map(item =>
                    item.id === product.id
                        ? { ...item, quantity: item.quantity + 1 }
                        : item
                );
            } else {
                return [...prev, { ...product, quantity: 1 }];
            }
        });
    };

    const removeFromCart = (productId) => {
        setCart(prev => prev.filter(item => item.id !== productId));
    };

    const updateQuantity = (productId, newQuantity) => {
        if (newQuantity <= 0) {
            removeFromCart(productId);
        } else {
            setCart(prev => prev.map(item =>
                item.id === productId
                    ? { ...item, quantity: newQuantity }
                    : item
            ));
        }
    };

    const getTotalPrice = () => {
        return cart.reduce((total, item) => total + (item.price * item.quantity), 0);
    };

    return (
        <div className="shopping-cart">
            <div className="products">
                <h2>Products</h2>
                {products.map(product => (
                    <div key={product.id} className="product">
                        <h3>{product.name}</h3>
                        <p>{product.price}</p>
                        <p>Stock: {product.stock}</p>
                        <button onClick={() => addToCart(product)}>
                            Add to Cart
                        </button>
                    </div>
                ))}
            </div>
            
            <div className="cart">
                <h2>Shopping Cart</h2>
                {cart.length === 0 ? (
                    <p>Your cart is empty</p>
                ) : (
                    <>
                        {cart.map(item => (
                            <div key={item.id} className="cart-item">
                                <span>{item.name}</span>
                                <span>{item.price}</span>
                                <input 
                                    type="number"
                                    value={item.quantity}
                                    onChange={(e) => updateQuantity(item.id, parseInt(e.target.value))}
                                    min="1"
                                />
                                <button onClick={() => removeFromCart(item.id)}>
                                    Remove
                                </button>
                            </div>
                        ))}
                        <div className="cart-total">
                            <strong>Total: {getTotalPrice()}</strong>
                        </div>
                        <button className="checkout-btn">Checkout</button>
                    </>
                )}
            </div>
        </div>
    );
}

// Challenge: Add stock validation
// Challenge: Add a wishlist feature
// Challenge: Add discount codes

Try It Yourself — Props & State Demo

Try It Yourself — Props & State DemoHTML

HTML Editor

✓ ValidTab = 2 spaces

<!DOCTYPE html>
<html>
<head>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { font-family: 'Segoe UI', sans-serif; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; }
  .container { max-width: 500px; margin: auto; }
  h1 { color: white; text-align: center; margin-bottom: 20px; font-size: 24px; }
  .card { background: white; border-radius: 16px; padding: 24px; margin-bottom: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); }
  .card h2 { color: #333; font-size: 18px; margin-bottom: 12px; }
  .product { display: flex; justify-content: space-between; align-items: center; padding: 12px; background: #f8f9fa; border-radius: 8px; margin: 8px 0; }
  .product-name { font-weight: bold; color: #333; }
  .product-price { color: #764ba2; font-weight: bold; }
  button { background: #764ba2; color: white; border: none; padding: 8px 16px; border-radius: 8px; cursor: pointer; font-weight: bold; transition: all 0.2s; }
  button:hover { background: #667eea; transform: scale(1.05); }
  .cart-total { text-align: right; font-size: 20px; font-weight: bold; color: #764ba2; margin-top: 12px; padding-top: 12px; border-top: 2px dashed #e0e0e0; }
  .empty { color: #999; text-align: center; padding: 20px; }
  .badge { background: #764ba2; color: white; border-radius: 50%; padding: 2px 8px; font-size: 12px; }
</style>
</head>
<body>
  <div class="container">
    <h1>🛒 Props & State Shopping Cart</h1>
    <div class="card">
      <h2>Products (Props → passed from parent)</h2>
      <div id="products"></div>
    </div>
    <div class="card">
      <h2>Cart (State → changes when you click) <span class="badge" id="cart-count">0</span></h2>
      <div id="cart"><p class="empty">Cart is empty — add items above!</p></div>
      <div class="cart-total" id="total" style="display:none">Total: $0</div>
    </div>
  </div>
<script>
  // "Props" = product data (read-only, passed in)
  const products = [
    { id: 1, name: '📱 Phone', price: 699 },
    { id: 2, name: '💻 Laptop', price: 1299 },
    { id: 3, name: '🎧 Headphones', price: 149 },
  ];
  
  // "State" = cart data (mutable, changes on user action)
  let cart = [];
  
  function renderProducts() {
    const el = document.getElementById('products');
    el.innerHTML = products.map(p =>
      '<div class="product"><span class="product-name">' + p.name + '</span><span class="product-price">$' + p.price + '</span><button onclick="addToCart(' + p.id + ')">Add +</button></div>'
    ).join('');
  }

  function addToCart(id) {
    const product = products.find(p => p.id === id);
    const existing = cart.find(item => item.id === id);
    if (existing) { existing.qty++; } else { cart.push({...product, qty: 1}); }
    renderCart();
  }

  function renderCart() {
    const el = document.getElementById('cart');
    const totalEl = document.getElementById('total');
    const countEl = document.getElementById('cart-count');
    if (cart.length === 0) { el.innerHTML = '<p class="empty">Cart is empty</p>'; totalEl.style.display = 'none'; countEl.textContent = '0'; return; }
    el.innerHTML = cart.map(item =>
      '<div class="product"><span class="product-name">' + item.name + ' x' + item.qty + '</span><span class="product-price">$' + (item.price * item.qty) + '</span><button onclick="removeFromCart(' + item.id + ')">Remove</button></div>'
    ).join('');
    const total = cart.reduce((sum, item) => sum + item.price * item.qty, 0);
    totalEl.textContent = 'Total: $' + total;
    totalEl.style.display = 'block';
    countEl.textContent = cart.reduce((sum, item) => sum + item.qty, 0);
  }

  function removeFromCart(id) { cart = cart.filter(item => item.id !== id); renderCart(); }
  renderProducts();
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { font-family: 'Segoe UI', sans-serif; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; }
  .container { max-width: 500px; margin: auto; }
  h1 { color: white; text-align: center; margin-bottom: 20px; font-size: 24px; }
  .card { background: white; border-radius: 16px; padding: 24px; margin-bottom: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); }
  .card h2 { color: #333; font-size: 18px; margin-bottom: 12px; }
  .product { display: flex; justify-content: space-between; align-items: center; padding: 12px; background: #f8f9fa; border-radius: 8px; margin: 8px 0; }
  .product-name { font-weight: bold; color: #333; }
  .product-price { color: #764ba2; font-weight: bold; }
  button { background: #764ba2; color: white; border: none; padding: 8px 16px; border-radius: 8px; cursor: pointer; font-weight: bold; transition: all 0.2s; }
  button:hover { background: #667eea; transform: scale(1.05); }
  .cart-total { text-align: right; font-size: 20px; font-weight: bold; color: #764ba2; margin-top: 12px; padding-top: 12px; border-top: 2px dashed #e0e0e0; }
  .empty { color: #999; text-align: center; padding: 20px; }
  .badge { background: #764ba2; color: white; border-radius: 50%; padding: 2px 8px; font-size: 12px; }
</style>
</head>
<body>
  <div class="container">
    <h1>🛒 Props & State Shopping Cart</h1>
    <div class="card">
      <h2>Products (Props → passed from parent)</h2>
      <div id="products"></div>
    </div>
    <div class="card">
      <h2>Cart (State → changes when you click) <span class="badge" id="cart-count">0</span></h2>
      <div id="cart"><p class="empty">Cart is empty — add items above!</p></div>
      <div class="cart-total" id="total" style="display:none">Total: $0</div>
    </div>
  </div>
<script>
  // "Props" = product data (read-only, passed in)
  const products = [
    { id: 1, name: '📱 Phone', price: 699 },
    { id: 2, name: '💻 Laptop', price: 1299 },
    { id: 3, name: '🎧 Headphones', price: 149 },
  ];
  
  // "State" = cart data (mutable, changes on user action)
  let cart = [];
  
  function renderProducts() {
    const el = document.getElementById('products');
    el.innerHTML = products.map(p =>
      '<div class="product"><span class="product-name">' + p.name + '</span><span class="product-price">$' + p.price + '</span><button onclick="addToCart(' + p.id + ')">Add +</button></div>'
    ).join('');
  }

function renderCart() {
    const el = document.getElementById('cart');
    const totalEl = document.getElementById('total');
    const countEl = document.getElementById('cart-count');
    if (cart.length === 0) { el.innerHTML = '<p class="empty">Cart is empty</p>'; totalEl.style.display = 'none'; countEl.textContent = '0'; return; }
    el.innerHTML = cart.map(item =>
      '<div class="product"><span class="product-name">' + item.name + ' x' + item.qty + '</span><span class="product-price">$' + (item.price * item.qty) + '</span><button onclick="removeFromCart(' + item.id + ')">Remove</button></div>'
    ).join('');
    const total = cart.reduce((sum, item) => sum + item.price * item.qty, 0);
    totalEl.textContent = 'Total: $' + total;
    totalEl.style.display = 'block';
    countEl.textContent = cart.reduce((sum, item) => sum + item.qty, 0);
  }

function removeFromCart(id) { cart = cart.filter(item => item.id !== id); renderCart(); }
  renderProducts();
</script>
</body>
</html>

Result

Click ▶ Run to see the result

Edit the code on the left, then click Run

HTML|77 lines|3766 chars|✓ Valid syntax

UTF-8

Props and State

What are Props?

Props Examples

State Management

Props vs State

Advanced Props Patterns

Advanced State Management

Practice Exercise: State Management

Try It Yourself — Props & State Demo

Quick Quiz — Props & State

Additional Resources

Recommended Reading

Online Resources