React — useContext

Creating Context

import { createContext, useContext } from 'react';

const ThemeContext = createContext('light');

Providing Context

function App() {
    return (
        <ThemeContext.Provider value="dark">
            <MyComponent />
        </ThemeContext.Provider>
    );
}

Consuming Context

function ThemedButton() {
    const theme = useContext(ThemeContext);

    return (
        <button className={theme}>
            Themed Button
        </button>
    );
}

useContext with State

const ThemeContext = createContext();

function App() {
    const [theme, setTheme] = useState('light');

    const toggleTheme = () => {
        setTheme(theme === 'light' ? 'dark' : 'light');
    };

    return (
        <ThemeContext.Provider value={{ theme, toggleTheme }}>
            <div>
                <Header />
                <Main />
            </div>
        </ThemeContext.Provider>
    );
}

function Header() {
    const { theme, toggleTheme } = useContext(ThemeContext);

    return (
        <header className={theme}>
            <h1>My App</h1>
            <button onClick={toggleTheme}>
                Toggle Theme
            </button>
        </header>
    );
}

useContext Examples

// User context
const UserContext = createContext();

function App() {
    const [user, setUser] = useState(null);

    const login = (userData) => setUser(userData);
    const logout = () => setUser(null);

    return (
        <UserContext.Provider value={{ user, login, logout }}>
            <Router />
        </UserContext.Provider>
    );
}

function Navbar() {
    const { user, logout } = useContext(UserContext);

    return (
        <nav>
            {user ? (
                <div>
                    <span>Welcome, {user.name}</span>
                    <button onClick={logout}>Logout</button>
                </div>
            ) : (
                <a href="/login">Login</a>
            )}
        </nav>
    );
}

// Cart context
const CartContext = createContext();

function CartProvider({ children }) {
    const [items, setItems] = useState([]);

    const addItem = (item) => {
        setItems([...items, item]);
    };

    const removeItem = (id) => {
        setItems(items.filter(item => item.id !== id));
    };

    const getTotal = () => {
        return items.reduce((total, item) => total + item.price, 0);
    };

    return (
        <CartContext.Provider value={{ items, addItem, removeItem, getTotal }}>
            {children}
        </CartContext.Provider>
    );
}

function Cart() {
    const { items, removeItem, getTotal } = useContext(CartContext);

    return (
        <div>
            <h2>Cart</h2>
            {items.map(item => (
                <div key={item.id}>
                    {item.name} - ${item.price}
                    <button onClick={() => removeItem(item.id)}>
                        Remove
                    </button>
                </div>
            ))}
            <p>Total: ${getTotal()}</p>
        </div>
    );
}

Mini Practice

Write React code that:

1. Creates a context
2. Provides context value
3. Consumes context with useContext
4. Creates a context with state

Up Next

Next: Learn about useRef hook.