Web Developers : 18-Adding Cart Features to Store Using React Context

Screenshot from the tutorial

Adding Cart Features to Your Store Using React Context

In today’s tutorial, we will explore how to add cart features to your e-commerce store using React Context. This approach allows us to manage state without prop drilling, making our components cleaner and more modular. Let’s dive into the steps involved in implementing this feature.

Prerequisites

Before you begin, ensure you have the following:

• Basic knowledge of React
• A React application set up (using Create React App or a similar setup)
• Familiarity with JavaScript ES6+ syntax

Understanding React Context

React Context is a powerful feature that allows you to share values between components without passing props explicitly through every level of the component tree. This is particularly useful for state management in applications that require information to be accessed by many components, such as a shopping cart in an e-commerce platform.

Step 1: Setting Up the Context

First, you need to create a context for your cart. This involves creating a new file, typically named CartContext.js, in your project.

// CartContext.js
import React, { createContext, useState } from 'react';

export const CartContext = createContext();

export const CartProvider = ({ children }) => {
    const [cartItems, setCartItems] = useState([]);

    const addItemToCart = (item) => {
        setCartItems((prevItems) => [...prevItems, item]);
    };

    const removeItemFromCart = (itemId) => {
        setCartItems((prevItems) => prevItems.filter(item => item.id !== itemId));
    };

    return (
        <CartContext.Provider value={{ cartItems, addItemToCart, removeItemFromCart }}>
            {children}
        </CartContext.Provider>
    );
};

Explanation of the Code

• createContext: This function creates a new context object.
• useState: This Hook is used to manage the state of the cart items.
• addItemToCart: This function adds an item to the cart.
• removeItemFromCart: This function removes an item from the cart based on its ID.
• Provider: This component wraps around the children components, providing them access to the context.

Step 2: Wrapping Your Application with the Provider

Next, you need to wrap your application with the CartProvider in your main component file, usually App.js. This allows all components within your application to access the cart context.

// App.js
import React from 'react';
import { CartProvider } from './CartContext';
import ProductList from './ProductList';
import Cart from './Cart';

const App = () => {
    return (
        <CartProvider>
            <ProductList />
            <Cart />
        </CartProvider>
    );
};

export default App;

Step 3: Creating a Product List Component

Here, we will create a ProductList component that displays products and allows users to add them to the cart.

// ProductList.js
import React, { useContext } from 'react';
import { CartContext } from './CartContext';

const ProductList = () => {
    const { addItemToCart } = useContext(CartContext);
    
    const products = [
        { id: 1, name: 'Product 1', price: 100 },
        { id: 2, name: 'Product 2', price: 200 },
    ];

    const handleAddToCart = (product) => {
        addItemToCart(product);
    };

    return (
        <div>
            {products.map((product) => (
                <div key={product.id}>
                    <h3>{product.name}</h3>
                    <p>Price: ${product.price}</p>
                    <button onClick={() => handleAddToCart(product)}>Add to Cart</button>
                </div>
            ))}
        </div>
    );
};

export default ProductList;

Explanation of the Code

• useContext: This Hook allows us to consume the context we created earlier.
• handleAddToCart: This function calls addItemToCart to add a selected product to the cart.

Step 4: Creating a Cart Component

Now, let’s create a Cart component that displays the items added to the cart.

// Cart.js
import React, { useContext } from 'react';
import { CartContext } from './CartContext';

const Cart = () => {
    const { cartItems, removeItemFromCart } = useContext(CartContext);

    return (
        <div>
            <h2>Your Cart</h2>
            {cartItems.length === 0 ? (
                <p>No items in cart</p>
            ) : (
                cartItems.map(item => (
                    <div key={item.id}>
                        <h4>{item.name}</h4>
                        <button onClick={() => removeItemFromCart(item.id)}>Remove</button>
                    </div>
                ))
            )}
        </div>
    );
};

export default Cart;

Explanation of the Code

• The Cart component retrieves the cart items from the context and displays them.
• If the cart is empty, it shows a message indicating that no items are available.
• Users can remove items from the cart with the removeItemFromCart function.

Conclusion

In this tutorial, we added cart features to an e-commerce store using React Context. We covered how to set up the context, create a product list, and display items in the cart. This method provides a clean and efficient way to manage state across your application.

Next Steps

• Consider adding functionality to persist cart items in local storage.
• Implement a checkout process for a complete shopping experience.
• Style your components for a better user interface.

With these steps, you can create a functional shopping cart in your React application. Happy coding!

Another view from the tutorial

---

Connect with SkillBakery Studios

Explore more tutorials, tools, and resources:

• skillbakery.com
• Facebook
• X (Twitter)
• YouTube Channel

Posted by SkillBakery Studios